首页 > 代码库 > 用angular实现隔行变色

用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=http://www.mamicode.com/[];>

      括号中第一个参数为你的控制器名字,第二个参数为一个数组,一是解决控制器参数的不可变性,也就是当你不想每次都写$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=‘‘就相当于满足条件

 

    

用angular实现隔行变色