首页 > 代码库 > 用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实现隔行变色