angular 学习笔记 (2) -- ng指令

今天介绍一些常用的ng指令吧。

一：ng-bind和ng-clock。

ng-bind：将data数据绑定到当前元素的 innerHTML，相当于初始化吧。

ng-clock:主要用来避免HTML模板显示引起的不希望的闪烁效应，其实ng-bind也有同样的效果。

解决闪烁问题还可以把引包放在head里面，先加载angular.js。

1 <div ng-app ng-init="data='hello iceStone'">
2     <!-- ng-bind 指令将data数据绑定到当前元素的 innerHTML -->
3     <strong ng-bind="data"></strong>
4   </div>

 1  <style>
 2     /* 如果引用在Body的最下面则需要hack */
 4       [ng\:cloak],
 5       [ng-cloak],
 6       [data-ng-cloak],
 7       [x-ng-cloak], 
 8       .ng-cloak, 
 9       .x-ng-cloak
10    {
11         display: none !important;
12     }
13   </style>
14 
15 <body ng-app ng-cloak>
16   {{'hello world'}}
17 </body>

二：ng-repeat：从集合中的每个项目实例化一个模板。想微信小程序wx.for那样。

 1 <body ng-app="myapp">
 2     <ul ng-controller="mycontroller">
 3         <li ng-repeat="item in data">
 4             <strong>{{item.name}}</strong>&nbsp;&nbsp;&nbsp;<span>{{item.age}}year</span>
 5         </li>
 6     </ul>
 7 </body>
 8 
 9 <script>
10     angular.module('myapp',[])
11             .controller('mycontroller',["$scope",function($scope){
12                 $scope.data = [];
13                 for(var i = 1;i<10;i++){//赋值给数组
14                     $scope.data[$scope.data.length] = {//新的一个数组赋值方法，可以学学
15                         age:i,
16                         name:'小黑'
17                     }
18                 }
19             }])
20 </script>

三：ng-class：通过数据绑定表达所有要添加的类的表达式来动态地设置HTML元素上的CSS类（输入名字首字母添加类名，样式变红色）

 2       <style>
　　　　.red{
 3       color: red;
 4     }
 5   </style>
 6 
 7 <body ng-app="myApp">
 8   <div ng-controller="ListController">
 9     <input type="text" ng-model="lastname">
10     <ul>
11       <li ng-repeat="item in dataset track by $index" ng-class="{red:lastname!=''&&item.startsWith(lastname)}">

//red后面判断是true还是false，true则添加该类名


　　　　　　　　　　{{item}}
　　　　　　</li>
12     </ul>
13   </div>
14 </body>
15 
16   <script>
17     angular.module('myApp', [])
18       .controller('ListController', ['$scope', function($scope) {
19         $scope.dataset = ['张三', '李四', '李三', '王五', '赵六', '赵二', '赵小黑'];
20       }]);
21   </script>

四：ng-show：显示；

　　ng-hide:隐藏；

　　ng-if:是否存在

　　ng-swich:可以处理比较复杂的ng-class判断。

 1  <select ng-model="selected">
 2     <option value="1">1</option>
 3     <option value="2">2</option>
 4     <option value="3">3</option>
 5   </select>
 6   <div ng-switch="selected">
 7     <div ng-switch-when="1">
 8       你选择的是1
 9     </div>
10     <div ng-switch-when="2">
11       你选择的是2
12     </div>
13     <div ng-switch-when="3">
14       你选择的是3
15     </div>
16     <div ng-switch-default>
17       你什么都没选
18     </div>
19   </div>

好了，今天就学到这里，通过两天的学习，深深的感受到ng在双向数据绑定的方面的功能强大。体验不错！！！

angular 学习笔记 (2) -- ng指令

推荐阅读