用angular实现隔行变色

　　在写隔行变色时应该知道的几个指令。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=''就相当于满足条件