angular.js - Bagaimana untuk memaparkan ul li daripada gelung bersarang ng-repeat supaya li pertama mempunyai gaya secara lalai, dan li yang sedang diklik mempunyai gaya dan li yang lain tidak mempunyai gaya?

Question

Soalan: Saya menggunakan ng-repeat untuk menggelungkan data. Bagaimanakah caranya: 1. Apabila membuka halaman, adakah li pertama yang dipaparkan secara lalai mempunyai gaya? 2. Adakah li yang sedang diklik mempunyai gaya, manakala li lain tidak mempunyai gaya?
Berikut ialah gambarajah kod html:

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

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

Answer 1

Gunakan ng-class untuk mencipta pembolehubah selectedIndex dalam $scope untuk menyimpan indeks li yang dipilih pada masa ini

<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;
}