@H_301_2@通过一段时间对angular指令的使用，理解了angular指令的意义，下面逐一介绍一下。
@H_301_2@ng-app：定义一个angualr模块，表示angular作用的范围，如下代码：
@H_301_2@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 > <!-- 定义在body中的 ng-app --> 19 <script src="angular.js"></script> 20 </body> 21 </html>
<!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>
2 <html lang="en"> 5 <title>www.dawen.org</title> 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> 21 </html>
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 17 app.controller('myCtr',128)">18 19 } 20 </script> 21 </body> 22 </html>
6 <style> 7 .ng-cloak { display:none; 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 25 app.controller('myCtr',255)">function($scope){ 26 $scope.goods = { 27 data:{'name':'apple','price':300,'num':028 29 }]); 30 </script> 31 </body> 32 </html>
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> //减少货物数量按钮 function($scope){ $scope.goods = { 26 data:{'name':'apple',0)">},27 add : (){ 28 $scope.goods.data.num = Math.min(++$scope.goods.data.num,6); //通过取最小值，来保证,货物数量最大不能超过6 },128)">30 reduce: 31 $scope.goods.data.num = Math.max(--$scope.goods.data.num,0); //通过取最大值，来保证,货物数量最小不为0 32 } 33 } 34 35 </script> 36 </body> 37 </html>
<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; ......
<input type="checkBox" ng-model="kl.name1" ng-true-value="1" ng-false-value="0">游戏 <input type="checkBox" ng-model="kl.name2" ng-电影 <div ng-show="kl.name1==1">游戏</div> <div ng-show="kl.name2==1">电影</div> ....... $scope.kl = {"name1":"电影","name2":"游戏"}; .......
<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'}]; ...
... {{scales}} <!-- view中显示出来，方便查看其结果 --> ... $scope.scales = {'name':'lol','value':'德玛西亚'}; angular.extend($scope.scales,{'web':'dota',0)">url':'moba'});
...
{{lol}} <!-- view中查看结果 -->
...
$scope.lol = [{'大区':'艾欧尼亚','hero':'剑姬'},{'大区':'守望之海','hero':'熔岩巨兽'}];
angular.forEach($scope.lol,0)"> (v,k) {
console.log(v); //控制台输出v,查看后发现 v 表示被遍历数组中的元素
v.hero = '德玛西亚'+v.hero; //添加前缀
})
dota = {'大区':'艾欧尼亚','hero':'剑姬'};
angular.forEach(dota,0)">(v,k){
console.log(v); //v表示元素值（艾欧尼亚..）,k表示元素名称（大区...）
})
