使用了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比较合适。
- 使用了ng-repeat 后的样式显示 ng-class 、ng-hide ng-show ng-if ng-style
- ng-if | ng-show | ng-hide的使用场景
- ng-show,ng-hide,ng-if指令
- ng-if ng-show ng-hide 区别
- (四下)ng-class指令,ng-style指令,ng-show/ng-hide指令,ng-if指令等....
- ng-show/ng-hide
- ng-show ; ng-hide
- ng-if与ng-show、ng-hide指令的区别
- ng-if、ng-show和ng-hide指令的区别
- ng-if,ng-show,ng-hide的区别
- angular中的显示与隐藏ng-show/ng-hide/ng-if/ng-switch
- ng-if和ng-show、ng-hide区别
- React实现Angularjs ng-show、ng-if和ng-hide
- angularjs ng-if ng-show ng-hide区别
- AngularJS的学习--ng-show/ng-hide/ng-if和ng-switch
- AngularJS的学习--ng-show/ng-hide/ng-if和ng-switch
- AngularJS – Conditional Display using ng-show / ng-hide, ng-if, ng-include, ng-switch
- NG
- windows 下alexnet模型的总结
- Android入门:通过JSON数据与服务器进行通信
- Java笔记
- Android代码规范文档
- 山东省赛 C Firework (杨辉三角组合数逆元)
- 使用了ng-repeat 后的样式显示 ng-class 、ng-hide ng-show ng-if ng-style
- 转盘抽奖插件概率实现
- Java如何连接数据库
- vue+express:搭建个人博客(1)
- searchInsert
- WHMCS 升级带来的问题
- 再说流性布局 display:flex ,以及看到的其他一些css 细节
- ssm框架使用poi实现数据导出到excel,并弹框下载
- 高可用MySQL搭建