一、概述
AngularJS 提供了一系列事件指令，用于将事件（如点击、鼠标移入等）绑定到 HTML 元素上。
最常用的是 ng-click 指令。
二、ng-click 指令
ng-click 指令用于定义 AngularJS 点击事件。
基本用法
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<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>
</body>Code language: HTML, XML (xml)说明
- 点击按钮时，
count的值加 1 ng-click中可以直接写表达式，也可以调用$scope上定义的函数
三、ng-click 调用函数
更常见的做法是在 $scope 上定义函数，然后在 ng-click 中调用。
隐藏/显示元素示例
<body>
<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>
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>
</body>Code language: HTML, XML (xml)说明
ng-click="toggle()"：点击按钮时调用toggle()函数toggle()函数将myVar取反ng-hide="myVar"：当myVar为true时，段落隐藏；为false时，段落显示- 点击按钮即可实现 隐藏/显示切换
四、ng-hide 回顾
| 指令 | 值为 true | 值为 false |
|---|---|---|
ng-hide | 元素隐藏 | 元素显示 |
本例中
ng-hide配合ng-click使用，实现了交互式的显示/隐藏效果。
五、总结
| 指令 | 作用 |
|---|---|
ng-click | 定义点击事件，可写表达式或调用函数 |
ng-hide | 根据布尔值控制元素隐藏/显示 |
ng-click中可以直接操作$scope变量，也可以调用$scope上定义的函数- 配合
ng-show/ng-hide可以轻松实现 显示/隐藏切换、计数器等交互效果
Previous: AngularJS 操作 DOM 元素
Next: AngularJS 模块