angular.js - How to default the background-color of the first element to red during ng-repeat, click on the corresponding element and the background will turn red while changing all other elements to black

Question

It is to dynamically change the style in ng-click. Do you have any ideas or methods? Urgent! Urgent! ! Waiting online! ! ! Please, all the great gods! !

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