ngClick directive and other event directives

The ngClick directive allows you to bind any custom behavior to the click event of the element.

The following code is an example of the usage of the ngClick directive calling a function.

snippet
<html ng-app="parking">
<head>
<title>Parking</title>
<script src="angular.js"></script>
<script>
var parking = angular.module("parking", []);
parking.controller("parkingCtrl", function($scope) {
$scope.appTitle = "Parking";
$scope.cars = [];
$scope.park = function(car) {
car.entrance = new Date();
$scope.cars.push(car);
delete $scope.car;
};
});
</script>
</head>
<body ng-controller="parkingCtrl">
<h3 ng-bind="appTitle"></h3>
<table>
<thead>
<tr>
<th>Plate</th>
<th>Entrance</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="car in cars">
<td><span ng-bind="car.plate"></span></td>
<td><span ng-bind="car.entrance"></span></td>
</tr>
</tbody>
</table>
<input type="text" ng-model="car.plate" placeholder="What's the plate?" />
<button ng-click="park(car)">Park</button>
</body>
</html>

In the preceding code, there is another pitfall. Inside the ngClick directive, we will call the park function, passing car as a parameter. As long as we have access to the scope through the controller, it would not be easy if we just accessed it directly, without passing any parameter at all.

Other Event Directives
Other directives that have the same behavior but are triggered by other events are ngBlur, ngChange, ngCopy, ngCut, ngDblClick, ngFocus, ngKeyPress, ngKeyDown, ngKeyUp, ngMousedown, ngMouseenter, ngMouseleave, ngMousemove, ngMouseover, ngMouseup, and ngPaste.
Related Tutorial
Follow Us
https://www.facebook.com/Rookie-Nerd-638990322793530 # # # # #