标签：isp 循环 数据 防止 scope 问题 闪烁 hidden one
在写隔行变色时应该知道的几个指令。ng-app ：angular入口，ng-repeat:控制重复，ng-cloak:防止闪烁，用法就是给一个class="ng-cloak",在样式表中写好
.ng-cloak{display:none}angular会在解析完代码时清除ng-cloak。还有另外一个防止闪烁的指令只ng-bind.当它作为标签属性时是不会显示出来的比如
<p ng-bind="msg"></p>
这个msg就不会出现闪烁。
二、注意注册控制器时用对象的思想，也就是this的指向问题
<ul ng-controller=‘ulController as obj‘> <li ng-repeat=‘item in obj.data‘ class="{{$index%2 ===0 ?‘red‘:‘green‘}}" >
如上诉代码，当把控制器作为一个对象时就千万小心this的指向，obj.data不能直接写data。所以需要在指令的后面关于数据操作前面加上obj
三、以上都是基础的的储备
真正开发angular时先写js
3.1首先创建自己的模板，注意后面的模板依赖，要么为空要么为其他模板，但是不能不写【】中括号。
var app=angular.module(‘myapp‘,[])
3.2创建控制器，也就是让需要操控的东西
app.controller(‘dataController‘,[$scope,function($scope){
this.data=[];
}])
括号中第一个参数为你的控制器名字，第二个参数为一个数组，一是解决控制器参数的不可变性，也就是当你不想每次都写$scope你就可以这样做。二十防止代码压缩造成的参数简化而影响代码。
正是因为在html中我把控制器当做了对象，所以这里可以直接写this，而不必要写$scope
四，ng-repeat的使用
将ng-repeat放在你想要重复操作的标签属性中。比如
<li ng-repeat=‘item in obj.data‘ class="{{$index%2 ===0 ?‘red‘:‘green‘}}" >
这里的item可以任意命名，in和for in循环一样angular自动帮我们循环历遍。{{}}是一种表达式，可以解析复杂的逻辑代码，运用三元表达式可以实现不同的逻辑。
当data中出现重复的数据会报错，所以在item in obj.data后面加上track by $index
五、ng-class和class的区别
首先它们都是设置样式的，ng-class写在单{}中，可以说是键值对的形式，
ng-class="{red:item.age>=20, green:item.age>=10&&item.age<20,blue:item.age<10}"
当键后面的布尔值为真时，这个键才生效
而class写在{{}}中括号中你可以直接写样式，{{‘red‘}}这样是生效的不过注意加引号
六、ng-show和ng-hidden
它们都可以实现显示隐藏。但是页面中依然存在只是修改了样式所以看不见
<p ng-show="isShowing">
当isShowing的布尔值为真时显示反之隐藏。
七、ng-if和ng-switch
ng-if是移除dom元素。它同样是当它 的布尔值为true显示，false隐藏
<p ng-if="true">我是中国人，我爱自己的祖国!</p>
ng-switch的显示隐藏和switch-case一样，当满足条件才显示隐藏
<div ng-switch="name"> <div ng-switch-when="小明"> 我是小明，我在这里！ </div> <div ng-switch-when="小红"> 我是小红! </div> </div>
ng-switch=‘name‘是js中你想控制的值，而ng-switch-when=‘‘就相当于满足条件
标签：isp 循环 数据 防止 scope 问题 闪烁 hidden one
原文地址：http://www.cnblogs.com/slpo007/p/6854207.html
