AngularJS has its own HTML events directives.
The ng-click Directive
The ng-click directive defines an AngularJS click event.
AngularJS Example
< button ng-click= "count = count + 1" >Click me! < /button >
< p > {{ count }} < /p >
< /div >
Try it Yourself »
Hiding HTML Elements
The ng-hide directive can be used to set the visibility of a part of an application.
The value ng-hide="true" makes an HTML element invisible.
The value ng-hide="false" makes the element visible.
AngularJS Example
< button ng-click= "toggle()" >Toggle < /button >
< p ng-hide= "myVar" >
First Name: < input type= "text" ng-model= "firstName" > < br >
Last Name: < input type= "text" ng-model= "lastName" > < br >
< br >
Full Name: {{firstName + " " + lastName}}
< /p >
< /div >
< script >
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
$scope.firstName = "John",
$scope.lastName = "Doe"
$scope.myVar = false;
$scope.toggle = function() {
$scope.myVar = !$scope.myVar;
};
});
< /script >
Try it Yourself »
Application explained:
The first part of the personController is the same as in the chapter about controllers.
The application has a default property (a variable): $scope.myVar = false;
The ng-hide directive sets the visibility, of a <p> element with two input fields, according to the value (true or false) of myVar.
The function toggle() toggles myVar between true and false.
The value ng-hide="true" makes the element invisible.
Showing HTML Elements
The ng-show directive can also be used to set the visibility of a part of an application.
The value ng-show="false" makes an HTML element invisible.
The value ng-show="true" makes the element visible.
Here is the same example as above, using ng-show instead of ng-hide:
AngularJS Example
< button ng-click= "toggle()" >Toggle < /button >
< p ng-show= "myVar" >
First Name: < input type= "text" ng-model= "firstName" > < br >
Last Name: < input type= "text" ng-model= "lastName" > < br >
< br >
Full Name: {{firstName + " " + lastName}}
< /p >
< /div >
< script >
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
$scope.firstName = "John",
$scope.lastName = "Doe"
$scope.myVar = true;
$scope.toggle = function() {
$scope.myVar = !$scope.myVar;
}
});
< /script >
Try it Yourself »