AngularJS拥有自己的HTML事件指令。
ng-click指令
ng-click指令定义了AngularJS的click事件。
<div ng-app="" ng-controller="myCtrl"> <button ng-click="count = count + 1">Click me!</button> <p>{{ count }}</p> </div>
隐藏HTML元素
ng-hide指令可以用来显示（或隐藏）application中的部分内容。
ng-hide="true"将使HTML元素invisible（即隐藏）。
ng-hide="false"将使HTML元素visible（即可见）。
<div ng-app="myApp" ng-controller="personCtrl"> <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>
代码解释：
personCtrl定义了一个控制器，这和控制器一章中的内容相同。
application有一个默认属性（变量）：$scope.myVar = false;
元素<p>拥有两个input标签，ng-hide指令通过myVal变量的值（true或false）设置visibility。
函数toggle()用来转换myVar变量的值，将其修改为true或false。
当ng-hide="true"时HTML元素会被隐藏（即invisible）。
显示HTML元素
ng-show指令也可以用来显示（或隐藏）application中的部分内容（与ng-hide指令正好相反）。
ng-show="false"将使HTML元素invisible（即隐藏）。
ng-show="true"将使HTML元素visible（即可见）。
上一小节中的示例也可以用ng-show来代替实现相同的功能：
<div ng-app="myApp" ng-controller="personCtrl"> <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>
本文转自Jaxu博客园博客，原文链接：http://www.cnblogs.com/jaxu/p/4496284.html，如需转载请自行联系原作者