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> <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在双向数据绑定的方面的功能强大。体验不错！！！
