AngularJS HTML 事件
AngularJS 有自己的 HTML 事件指令。
ng-click 指令
ng-click 指令定义了一个 AngularJS 单击事件。
AngularJS 实例
<div ng-app="" ng-controller="myController">
<button ng-click="count = count + 1">点我！</button>
<p>{{ count }}</p>
</div>
<button ng-click="count = count + 1">点我！</button>
<p>{{ count }}</p>
</div>
尝试一下 »
隐藏 HTML 元素
ng-show 指令定义了应用程序的可见性。
值 ng-show="true"（布尔值）让元素可见。
值 ng-show="false"（布尔值）让元素不可见。
AngularJS 实例
<div ng-app="" ng-controller="personController">
<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>
function personController($scope) {
$scope.person = {
firstName: "John",
lastName: "Doe"
};
$scope.myVar = true;
$scope.toggle = function() {
$scope.myVar = !$scope.myVar;
};
}
</script>
<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>
function personController($scope) {
$scope.person = {
firstName: "John",
lastName: "Doe"
};
$scope.myVar = true;
$scope.toggle = function() {
$scope.myVar = !$scope.myVar;
};
}
</script>
尝试一下 »
实例讲解：
personController 的第一部分与控制器一章中的相同。
应用程序有一个新的 默认属性：$scope.myVar = true;
ng-show 指令使用变量 myVar （true 或 false）。
新的函数 toggle() 把 myVar 值在 true 和 false 之间切换。
