AngularJS Events
AngularJS has its own HTML event directive.
ng-click command
The ng-click directive defines the AngularJS click event.
AngularJS instance
<!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script></head><body><div ng-app="myApp" ng-controller="myCtrl"><button ng-click="count = count + 1">Click me! </button><p>{{ count }}</p></div><script>var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) { $scope.count = 0;});</script></body></html>Running effect:
0
Hide HTML elements
The ng-hide directive is used to set whether the application part is visible.
ng-hide="true" Sets that the HTML element is invisible.
ng-hide="false" Sets the HTML element to be visible.
AngularJS instance
<!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script></head><body><div ng-app="myApp" ng-controller="personCtrl"><button ng-click="toggle()">Hide/Show</button><p ng-hide="myVar">Name: <input type=text ng-model="firstName"><br>Name: <input type=text ng-model="lastName"><br><br>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></body></html>Running results:
name:
surname:
Name: John Doe
Application analysis:
The first part of the personController is similar to the controller chapter.
The application has a default property: $scope.myVar = false;
The ng-hide directive sets whether the <p> element and the two input fields are visible, and sets whether it is visible according to the value of myVar (true or false).
The toggle() function is used to switch the values of the myVar variable (true and false).
ng-hide="true" makes the element invisible.
Display HTML elements
The ng-show directive can be used to set whether a portion of the application is visible.
ng-show="false" can set HTML elements invisible.
ng-show="true" can be set to be visible to HTML elements.
The following example uses the ng-show directive:
AngularJS instance
<!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script></head><body><div ng-app="myApp" ng-controller="personCtrl"><button ng-click="toggle()">Hide/Show</button><p ng-show="myVar">Name: <input type=text ng-model="person.firstName"><br>Name: <input type=text ng-model="person.lastName"><br><br>Name: {{person.firstName + " " + person.lastName}}</p></div><script>var app = angular.module('myApp', []);app.controller('personCtrl', function($scope) { $scope.person = { firstName: "John", lastName: "Doe" }; $scope.myVar = true; $scope.toggle = function() { $scope.myVar = !$scope.myVar; };});</script></body></html>Running results:
name:
surname:
Name: John Doe
The above is a compilation of AngularJS event information. We will continue to add it later. For reference by friends in need.