AngularJS 事件
ng-click 指令
ng-click 指令定义了 AngularJS 点击事件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="angular-1.6.3/angular.js"></script>
<style>
</style>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p ng-click="toggle()">按钮</p>
<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("myCtrl",function ($scope) {
$scope.count = 0;
$scope.firstName="chen";
$scope.lastName="yunfei";
$scope.myVar=false;
$scope.toggle=function () {
$scope.myVar=!$scope.myVar;
}
})
</script>
</body>
</html>
应用解析:
第一部分 personController与控制器章节类似。
应用有一个默认属性: $scope.myVar = false;
ng-hide 指令设置 <p>元素及两个输入域是否可见， 根据 myVar 的值 (true 或 false) 来设置是否可见。
toggle() 函数用于切换 myVar 变量的值（true 和 false）。
ng-hide="true" 让元素 不可见。
ng-show 指令可用于设置应用中的一部分是否可见 。
ng-show="false" 可以设置 HTML 元素 不可见。
ng-show="true" 可以以设置 HTML 元素可见。
以下实例使用了 ng-show 指令:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="angular-1.6.3/angular.js"></script>
<style>
</style>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p ng-click="toggle()">按钮</p>
<p ng-show="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("myCtrl",function ($scope) {
$scope.count = 0;
$scope.firstName="chen";
$scope.lastName="yunfei";
$scope.myVar=true;
$scope.toggle=function () {
$scope.myVar=!$scope.myVar;
}
})
</script>
</body>
</html>