angulaire.js - Comment afficher le ul li à partir d'une boucle imbriquée de ng-repeat afin que le premier li ait un style par défaut, et que le li actuellement cliqué ait un style et que l'autre li n'ait pas de style ?

Question

Question : J'utilise ng-repeat pour boucler les données. Comment faire : 1. Lors de l'ouverture de la page, le premier li affiché par défaut a-t-il un style ? 2. Le li actuellement cliqué a-t-il des styles, tandis que les autres li n'ont pas de styles ?
Voici le schéma du code html :

<ul ng-repeat="u in pinpaiData" class="product_box">

<li ng-repeat="c in u.goods"  class="defaultClass" ng-click="twoClick($index)" >{{c.goods_name}}</li>
       </ul>

Answer 1

Utilisez ng-class pour créer une variable selectedIndex dans $scope pour stocker l'index du li actuellement sélectionné. La valeur par défaut est 0. Supposons que la classe sélectionnée s'appelle selectedClass

.

<li ng-repeat="c in u.goods"  ng-class {"defaultClass":$index !=chosedIndex,'chosenClass':$index ==chosedIndex} 
ng-click="twoClick($index)" >{{c.goods_name}}</li>


----------
$scope.chosedIndex = 0;//默认是0使第一个有样式
$scope.twoClick = function(index){
    //保存点击的li位置
    $scope.chosedIndex = index;
}