angular.js - 如何在ng-repeat时默认第一个元素background-color为红色，点击对应元素背景变红同时更换其他全为黑色

Question

就是在ng-click中动态更改样式，请问有什么思路或方法嘛？急急急！！在线等！！！拜托了各位大神！！

Answer 1

Provide a simple idea:
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;
}

Modify your code like this:

HTML:

<p class="p10 c-white w50p fl mr1 tc" ng-repeat="e in item.images">
    <p class="w50p h50 img_p" ng-class="{b-red:isActive === $index,b-white:!isActive === $index}" ng-click="changeGood($index)">
        <img src="{{e.path}}">
    </p>
    <span class="ib w50p fs0-6 span-over">{{e.description}}</span>
</p>

controller:

$scope.isActive=0;

$scope.changeGood=function(index){
    $scope.isActive=index;
    
}

Answer 2

I have answered a similar question to yours raised by another person before. I directly changed the demo I wrote before and sent it to you. It completely meets your requirements. You can preview it and scroll down if you can’t see the effect. Wall, the demo is as follows:
Demo