使用了ng-repeat 后的样式显示 ng-class 、ng-hide ng-show ng-if ng-style

来源:互联网 发布:广西广电网络高清机顶盒 编辑:程序博客网 时间:2024/05/22 04:42

用angular 开发项目避免不了要使用ng-repeat ,使用了ng-repeat 好多我们想要 实现的样式就比较难了。

一、首先说一下  ng-repeat 吧,需要注意的地方不多.

1、里面若有重复数据会报错,需要 在ng-repeat="list in lists"后加track by $index,就不会再报Error:[ngRepeat:dupes]的错了。

2、如果是多层ng-repeat ,当里层的ng-repeat 想要获取外层的$index,就必须将外层的$index ,通过ng-init="outindex = $index"赋值给一个新的变量。

二、ng-class 常规用法 ng-class="{{ 'active':true,' ':false}}"即key,value形式后边的值为true实现一种样式,false 实现 另外一种样式。

如果使用了ng-repeat  简单的直接{{“active”:list.property==property}}来对repeat的每个对象进行判断,比这复杂可以外加条件【】 即ng-class="{{ 'active':true,' ':false}}【】"返回true ,false来实现效果,[ ]里面可以是函数或表达式。

三、ng-hide ng-show 表达式和ng-if表达式相同里面的值为false或true,以 ng-hide为例,ng-hide="expression".简单可以这样,若使用了ng-repeat,同样。ng-hide="list.property==property"。就可以了,这里说一下ng-hide 和ng-if区别,ng-hide 为true是隐藏元素,但元素存在。ng-if为true是元素存在,false元素不存在。具体场景决定使用哪个来达到效果。

四、ng-style 实现简单css效果比较合适,ng-style = "expression"   $scope.expression = {"color":white}实现逻辑相关的效果还是用ng-class比较合适。


0 0