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



原创粉丝点击