媲美jQuery的JS框架：AngularJS（2）(3)_H5之家 - 中国HTML5教程资源分享第一站

举个栗子：

1 <body ng-app="app" ng-controller="ctrl"> 2  6 <button ng-disabled="!myCheck">按钮</button> 7 8 <label> 9 <input type="checkbox" ng-model="myCheck" />是否同意 10 </label> 11 12 <p>{{myCheck}}</p> 13 <hr /> 14 <label> 15 <input type="checkbox" ng-model="myShow" />是否显示 16 17 </label> 18 <p ng-show="myShow">我显示出来啦！</p> 19 <hr /> 20 21 <label> 22 <input type="checkbox" ng-model="myHide" />是否隐藏 23 24 </label> 25 <p ng-hide="myHide">我显示出来啦！</p> 26 </body> 27 28 <script type="text/javascript" src="js/angular.js"></script> 29 <script type="text/javascript"> 30 angular.module("app",[]) 31 .controller("ctrl",function($scope){ 32 33 }) 34 </script>

结果：

4、ng-if：是否移除元素

当传入true显示，传入false移除

效果与ng-hide相同，但是ng-hide是将元素隐藏，而ng-if是将元素在DOM中移除！！！

1 <body ng-app="app" ng-controller="ctrl"> 2 　　　　　<label> 3 <input type="checkbox" ng-model="myIf" />是否移除 4 5 </label> 6 <p ng-if="!myIf">我显示出来啦！</p> 7 <hr /> 8 　　</body> 9 10 <script type="text/javascript" src="js/angular.js"></script> 11 <script type="text/javascript"> 12 angular.module("app",[]) 13 .controller("ctrl",function($scope){ 14 }) 15 </script>

结果：

5、ng-checked:传入true当前的复选框被选中

再次疯狂举栗子：

1 <body ng-app="app" ng-controller="ctrl"> 2 　　　　　<input type="checkbox" ng-model="all"> Check all<br><br> 3 4 <input type="checkbox" ng-checked="all">Volvo<br> 5 <input type="checkbox" ng-checked="all">Ford<br> 6 <input type="checkbox" ng-checked="all">Mercedes 7 　　</body> 8 9 <script type="text/javascript" src="js/angular.js"></script> 10 <script type="text/javascript"> 11 angular.module("app",[]) 12 .controller("ctrl",function($scope){ 13 14 </script>

结果：

6、ng-class :用于设置给元素添加class类

可选值有以下几种情况：

①可以是字符串。表示直接给元素添加对应的class。多个class之间用空格分隔；

②可以是对象，对象的键表示class名字，对象的值为true或false，当为true时表示添加对应的class

③可以是数组，数组中的值可以是字符串或对象，判断同上

举栗子：

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 .div{ 8 width: 200px; 9 height: 200px; 10 background-color: cadetblue; 11 } 12 .div1{ 13 width: 200px; 14 height: 200px; 15 background-color: blueviolet; 16 } 17 .div3{ 18 color: red; 19 } 20 </style> 21 </head> 22 <body ng-app="app" ng-controller="ctrl"> 23 24 <div ng-class="'div'">这是一个div</div> 25 <label> 26 <input type="checkbox"ng-model="myClass"/>给div添加样式？ 27 </label> 28 <div ng-class="{'div':myClass,'div1':!myClass}">zheshi</div> 29 <hr/> 30 <div ng-class="[{'div':myClass,'div1':!myClass},'div3']">haha</div> 31 <hr/> 32 </body> 33 34 <script type="text/javascript" src="js/angular.js"></script> 35 <script type="text/javascript"> 36 angular.module("app",[]) 37 .controller("ctrl",function($scope){ 38 39 }) 40 </script> 41 </html>

结果：

7、ng-switch根据变量的值进行选择

再次举例：

1 <body ng-app="app" ng-controller="ctrl"> 2 我喜欢的网站 3 <select ng-model="myVar"> 4 <option >切换 5 <option value="runoob"> 6 <option value="google"> 7 <option value="taobao"> 8 </select> 9 10 <hr> 11 <div ng-switch="myVar"> 12 <div ng-switch-when="runoob"> 13 <h1>哈哈</h1> 14 <p>欢迎访问</p> 15 </div> 16 <div ng-switch-when="google"> 17 <h1>Google</h1> 18 <p>欢迎访问Google</p> 19 </div> 20 <div ng-switch-when="taobao"> 21 <h1>淘淘</h1> 22 <p>欢迎访问淘淘</p> 23 </div> 24 <div ng-switch-default> 25 <h1>切换</h1> 26 <p>选择不同选项显示对应的值。</p> 27 </div> 28 </div> 29 <hr> 30 </body> 31 32 <script type="text/javascript" src="js/angular.js"></script> 33 <script type="text/javascript"> 34 angular.module("app",[]) 35 .controller("ctrl",function($scope){ 36 37 </script>

结果：

3.2 AngularJS中的事件

AngularJS中的事件有很多，小编只是给大家介绍一些比较常用的。

1、ng-click 定义AngularJS的点击事件

ng-click只能触发绑定在AngularJS的作用域上面的属性和方法；

2、ng-foucus：获得焦点

3、ng-blur ：失去焦点

4、ng-change：内容改变