AngularJS 事件

ng-click 指令

点击加减运算

<div ng-app="myApp" ng-controller="myCtrl"><button ng-click="count = count + 1">加！</button><button ng-click="count = count - 1">减！</button><p>{{ count }}</p></div><script>var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) { $scope.count = 0;});</script> 点击进行隐藏显示切换

<div ng-app="myApp" ng-controller="personCtrl"><button ng-click="toggle()">隐藏/显示</button><p ng-hide="myVar">名: <input type=text ng-model="firstName"><br>姓: <input type=text ng-model="lastName"><br><br>姓名: {{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>

应用解析:

第一部分 personController与控制器章节类似。

应用有一个默认属性: $scope.myVar = false;

ng-hide 指令设置 <p>元素及两个输入域是否可见， 根据 myVar 的值 (true 或 false) 来设置是否可见。

toggle() 函数用于切换 myVar 变量的值（true 和 false）。

ng-hide="true" 让元素 不可见。

ng-show

<div ng-app="myApp" ng-controller="personCtrl"><button ng-click="toggle()">隐藏/显示</button><p ng-show="myVar">名: <input type=text ng-model="person.firstName"><br>姓: <input type=text ng-model="person.lastName"><br><br>姓名: {{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>