通过一段时间对angular指令的使用，理解了angular指令的意义，下面逐一介绍一下。
ng-app：定义一个angualr模块，表示angular作用的范围，如下代码：
ng-app在html标签上使用时，表示angular作用于整个html页面，而在body上使用时表示作用于整个body
1 <!DOCTYPE html> 2 <html lang="en" ng-app="app"> <!-- 定义在html中的 ng-app --> 3 <head> 4 <meta charset="UTF-8"> 5 <title>test</title> 6 </head> 7 <body> 8 <script src="angular.js"></script> 9 </body> 10 </html> 11 12 <!DOCTYPE html> 13 <html lang="en"> 14 <head> 15 <meta charset="UTF-8"> 16 <title>test</title> 17 </head> 18 <body ng-app="app"> <!-- 定义在body中的 ng-app --> 19 <script src="angular.js"></script> 20 </body> 21 </html>
ng-controller: 定义angular控制器，控制器是view与model之间数据传递的纽带
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body ng-app="app">
<div ng-controller="myCtr">
</div>
<script src="angular.js"></script>
</body>
</html>
数据绑定有三种格式：
表达式形式{{}}、ng-bind='XXX'、ng-model='XXX'
表达式{{}}多用于绑定的数据较多时使用,指令形式为后两种，ng-model用于表单数据绑定，指令绑定数据不会出现闪屏问题（网速慢时，出现{{}}问题）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>www.dawen.org</title> 6 </head> 7 <body ng-app="app"> 8 <div ng-controller="myCtr"> 9 {{msg}} <!-- 表达式的形式 --> 10 <p ng-bind="msg"></p> <!-- ng-bind指令的形式 --> 11 <input type="text" ng-model="msg"> <!-- ng-model指令形式，用于表单数据绑定 --> 12 </div> 13 <script src="angular.js"></script> 14 <script> 15 var app = angular.module('app', []); 16 app.controller('myCtr',['$scope', function($scope){ 17 18 } 19 </script> 20 </body> 21 </html>
为了解决上述表达式{{}}绑定数据时的闪屏问题，我们引入ng-cloak指令，其用法如下：
由于网速过慢，angular还未能很快加载进来，所以页面会出现{{}}，闪屏问题
class="ng-cloak":将控制器内容隐藏，用户便不会看到{{}}闪屏
等到angular.js加载进来后，会通过ng-cloak指令将隐藏的内容显示出来，提升了用户体验效果，也解决了表达式{{}}闪屏问题，可以放心大胆的去使用表达式了
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>test</title> 6 .ng-cloak { 7 display:none; <!-- 默认将控制器中内容隐藏 --> 8 } 9 </head> 10 <body ng-app="app"> 11 <div ng-controller="myCtr" ng-cloak class="ng-cloak"> <!-- 当我们刷新页面时,控制器内的内容是隐藏的,angular加载进来后通过ng-cloak指令将其内容显示出来 --> 12 {{}} 13 </div> 14 <script src="angular.js"></script> 15 <script> 16 var app = angular.module('app', []); 17 app.controller('myCtr',['$scope', function($scope){ 18 19 } 20 </script> 21 </body> 22 </html>
ng-value,用于表单中数据绑定的表达式（计算等），由此看来指令就像游戏中的装备，在什么样的情况下要使用什么样的指令（装备），这样才能标签语义化
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>test</title> 6 <style> 7 .ng-cloak { 8 display:none; 9 } 10 </style> 11 </head> 12 <body ng-app="app"> 13 <div ng-controller="myCtr" ng-cloak class="ng-cloak"> 14 <form> 15 <input type="text" name="title" ng-model="goods.data.name"> 16 <input type="text" name="price" ng-model="goods.data.price"> 17 <input type="text" name="num" ng-model="goods.data.num"> 18 <input type="text" name="allPrice" ng-value="goods.data.price*goods.data.num" ng-readonly="true" > 19 <input type="submit"> 20 </form> 21 </div> 22 <script src="angular.js"></script> 23 <script> 24 var app = angular.module('app', []); 25 app.controller('myCtr',['$scope', function($scope){ 26 $scope.goods = { 27 data:{'name':'apple', 'price':300, 'num':0} 28 } 29 }]); 30 </script> 31 </body> 32 </html>
下面实现一个购物车功能，点击按钮增加货物数量，并增加总价，相反也可点击按钮减少货物数量，减少总价
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>test</title> 6 <style> 7 .ng-cloak { 8 display:none; 9 } 10 </style> 11 </head> 12 <body ng-app="app"> 13 <div ng-controller="myCtr" ng-cloak class="ng-cloak"> 14 <p>商品名称：{{goods.data.name}}</p> 15 <p>商品价格：{{goods.data.price}}</p> 16 <p>商品数量：{{goods.data.num}}</p> 17 <p>商品总价：{{goods.data.price*goods.data.num}}</p> 18 <p ng-bind="goods.data.price"></p> 19 <button ng-click="goods.add()">add</button> //增加货物数量按钮 20 <button ng-click="goods.reduce()">reduce</button> //减少货物数量按钮 21 </div> 22 <script src="angular.js"></script> 23 <script> 24 var app = angular.module('app', []); 25 app.controller('myCtr',['$scope', function($scope){ $scope.goods = { 26 data:{'name':'apple', 'price':300, 'num':0}, 27 add : function(){ 28 $scope.goods.data.num = Math.min(++$scope.goods.data.num, 6); //通过取最小值，来保证,货物数量最大不能超过6 29 }, 30 reduce: function(){ 31 $scope.goods.data.num = Math.max(--$scope.goods.data.num, 0); //通过取最大值，来保证,货物数量最小不为0 32 } 33 } 34 }]); 35 </script> 36 </body> 37 </html>
Math.min(++$scope.goods.data.num, 6); 货物数量自加，然后与6比较取最小值，这样即可保证货物数量最大为6
Math.max(--$scope.goods.data.num, 0); 货物数量自减，然后与0比较取最大值，这样即可保证货物数量最小为0
在上述代码中加入下面代码片段，当我们点击关闭网站后status=0,status==0返回true，即ng-show="true",所以显示“网站正在维护”。
相反不显示，默认状态下，$scope.status = 1;也不会显示提示语。
<input type="radio" ng-model="status" ng-value="1">开启网站 <input type="radio" ng-model="status" ng-value="0">关闭网站 <div ng-show="status==0"> <textarea>网站正在维护</textarea> </div> ...... $scope.status = 1; ......
复选框使用，注意要加 ng-true-value;ng-false-value;表示复选框被选中时其ng-model的值为1（0），言外之意就是其值想为什么就为什么，我们控制
<input type="checkbox" ng-model="kl.name1" ng-true-value="1" ng-false-value="0">游戏 <input type="checkbox" ng-model="kl.name2" ng-true-value="1" ng-false-value="0">电影 <div ng-show="kl.name1==1">游戏</div> <div ng-show="kl.name2==1">电影</div> ....... $scope.kl = {"name1":"电影","name2":"游戏"}; .......
下拉框使用，其原理是通过 v.value as v.name for v in data 遍历数组，然后将其渲染成option标签, ng-model的值即为select的值（哪个option被选中值就是对应的
option标签的值）
<select ng-options="v.value as v.name for v in data" ng-model="city"> <option value=''>请选择城市</option> <!-- 默认显示,记得加value='' --> </select> ... $scope.data = [{name:'北京',value:'01'},{name:'广东', value:'02'}]; ...
文章来自：http://www.cnblogs.com/zhangyunlin/
追加方法，会在原有obj后面添加后面的obj,注意属性名不能一样，不然会覆盖（红色标注）
... {{scales}} <!-- view中显示出来，方便查看其结果 --> ... $scope.scales = {'name':'lol', 'value':'德玛西亚'}; angular.extend($scope.scales, {'web':'dota','url':'moba'});
遍历方法，forEach(),可以遍历数组，亦可遍历对象，回调中的参数 v表是被便利的元素，k表示索引（下标）
...
{{lol}} <!-- view中查看结果 -->
...
$scope.lol = [{'大区':'艾欧尼亚','hero':'剑姬'},{'大区':'守望之海', 'hero':'熔岩巨兽'}];
angular.forEach($scope.lol,function (v, k) {
console.log(v); //控制台输出v, 查看后发现 v 表示被遍历数组中的元素
v.hero = '德玛西亚'+v.hero; //添加前缀
})
dota = {'大区':'艾欧尼亚','hero':'剑姬'};
angular.forEach(dota, function(v, k){
console.log(v); //v表示元素值（艾欧尼亚..）, k表示元素名称（大区...）
})
扫一扫
1697
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
