AngularJS 学习之事件

Posted 2020-08-20 小春熙子

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>