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>

 

posted @ 2016-11-22 18:20  小春熙子  阅读(197)  评论(0编辑  收藏  举报