ng-repeat设置第一个元素为默认样式,点击其余元素切换样式
来源:互联网 发布:中经网数据库账号 编辑:程序博客网 时间:2024/05/16 06:39
如何在ng-repeat时默认第一个元素background-color为红色,点击对应元素背景变红同时更换其他全为黑色
提供一个简单思路:
JS:
$scope.isActive = 0;$scope.arr = [ { //code here }, { //code here }];$scope.selectItem = function (index) { item.isActive = index;}
HTML:
<ul> <li ng-repeat="item in arr track by $index" ng-class="{red:isActive === $index, black:!isActive === $index}" ng-click="selectItem($index)"></li></ul>
CSS:
.red { background: red;}.black { background: black;}
修改你的代码就是这样:
HTML:
<div class="p10 c-white w50p fl mr1 tc" ng-repeat="e in item.images"> <div class="w50p h50 img_div" ng-class="{b-red:isActive === $index,b-white:!isActive === $index}" ng-click="changeGood($index)"> <img src="{{e.path}}"> </div> <span class="ib w50p fs0-6 span-over">{{e.description}}</span></div>
controller:
$scope.isActive=0;$scope.changeGood=function(index){ $scope.isActive=index; }
原文转载自:https://segmentfault.com/q/1010000006132084/a-1020000006132455
阅读全文
0 0
- ng-repeat设置第一个元素为默认样式,点击其余元素切换样式
- angularjs下ng-repeat点击元素改变样式实现
- javascript为DOM元素设置样式
- 为非列表元素设置列表样式
- 13_为DOM元素设置样式
- AngularJS 设置元素样式
- 子元素设置浮动样式,父元素高度为0
- HTML4.0元素默认样式
- Jquery 获取某个样式除第一个以外的元素
- juqery点击元素添加样式同级元素移除样式
- ng-repeat重复元素问题
- JQuery为元素添加样式
- JQuery为元素添加样式
- JQuery为元素添加样式
- JQuery为元素添加样式
- JQuery为元素添加样式
- JQuery为元素添加样式
- JQuery为元素添加样式
- bzoj 1659: [Usaco2006 Mar]Lights Out 关灯(IDA*)
- EditPlus 汉文包下载
- 算法提高 ADV-222 7-2求arccos值
- 求身份证号末位
- IgH Master 1.5.2 Documentation 中文版
- ng-repeat设置第一个元素为默认样式,点击其余元素切换样式
- 关于springmvc执行的流程和处理过程分析
- 算法提高 ADV-223 8-1因式分解
- 博客应增加功能
- 浅谈单片机、ARM和DSP的异同
- markdown
- celery初级教程(二)
- bzoj 2111(Lucas定理+递推)
- 神经单元阀函数的选择