As
the name suggests the ng-click
directive is used to handle click events from controls in the view layer. The
ng-click directive is commonly associated with button controls to trigger
events from the view to the controller layer, but they can be associated with
any type of controls like dropdowns, links etc.
The syntax for the ng-click directive is as follows
ng-click
= “<Function to be called in the controller layer>”
The function is defined in the controller under $scope, when the user triggers the event the function associated with the ng-click directive gets executed and performs appropriate updates in the model ($scope) and the view.
The following example shows how the ng-click directive associated with the Clear button clears the properties FName and LName in the model and view.
<html ng-app>
<head>
<meta charset="utf-8">
<title>AngularJS - Basic</title>
<script src="angular.min.js"></script>
<script>
function nameController($scope){
$scope.FName = 'FirstName';
$scope.LName = 'LastName';
$scope.Reset = function() {
$scope.FName = '';
$scope.LName = '';
}
}
</script>
</head>
<body>
<div ng-controller="nameController">
First Name: <input type="text" ng-model="FName"><br/><br/>
Last Name: <input type="text" ng-model="LName"><br/><br/>
Your Name is :{{FName}} {{LName}}<br/><br/>
<button ng-click="Reset()">Clear</button>
</div>
</body>
</html>
The syntax for the ng-click directive is as follows
The function is defined in the controller under $scope, when the user triggers the event the function associated with the ng-click directive gets executed and performs appropriate updates in the model ($scope) and the view.
The following example shows how the ng-click directive associated with the Clear button clears the properties FName and LName in the model and view.
<html ng-app>
<head>
<meta charset="utf-8">
<title>AngularJS - Basic</title>
<script src="angular.min.js"></script>
<script>
function nameController($scope){
$scope.FName = 'FirstName';
$scope.LName = 'LastName';
$scope.Reset = function() {
$scope.FName = '';
$scope.LName = '';
}
}
</script>
</head>
<body>
<div ng-controller="nameController">
First Name: <input type="text" ng-model="FName"><br/><br/>
Last Name: <input type="text" ng-model="LName"><br/><br/>
Your Name is :{{FName}} {{LName}}<br/><br/>
<button ng-click="Reset()">Clear</button>
</div>
</body>
</html>
No comments:
Post a Comment