AngularJS 学习之事件
1.ng-click指令:定义了AngularJS点击事件
<div ng-app="" ng-controller="myCtrl">
<button ng-click="count=count+1">点我!</button>
<p>{{count}}</p>
</div>
2.隐藏HTML元素:
**ng-hide指令用于设置应用部分是否可见
**ng-hide="true"设置HTML元素不可见
**ng-hide="false"设置HTML元素可见
<div ng-app="myApp" ng-controller="personCtrl">
<button ng-click="toggle()">隐藏/显示</buttton>
<p ng-hide="myVar"> //ng-hide指令设置<p>元素及两个输入域是否可见,根据myVar的值(true或false)来设置是否可见
名:<input type="text" ng-model="firstName"><br>
姓名:<input type="text" ng-model="lastName"><br>
<br>
Full Name:{{firstName+" "+lastName}}
</p>
<script>
var app=angular.module('myApp',[]);
app.controller('personCtrl',function($scope){
$scope.firstName="John",
$scope.lastName="Doe",
$scope.myVar=false;
$scope.toggle=function(){ //toggle()函数用于切换myVar变量的值(true或false)
$scope.myVar=!$scope.myVar();
}
});
</script>
</div>
3.显示HTML元素:ng-show指令用于设置应用中的一部分是否可见;
**ng-show="false"可以设置HTML元素不可见
**ng-show="True"可以设置HTML元素可见
<div ng-app="myApp" ng-controller="personCtrl">
<button ng-click="toggle()">隐藏/显示</button>
<p ng-show="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=true;
$scope.toggle=function(){
$scope.myVar=! $scope.myVar;
}
});
</script>