angular.js - ng-repeat嵌套循环出来的ul li，如何做到默认显示第一条Li是有样式，当前被点击的li有样式其他的li则无样式？

Question

提问：我用ng-repeat循环出来的数据，如何做到 ：1、打开页面的时候，默认显示第一个li是有样式的？ 2、当前被点击的li有样式，其他的li则无样式？
以下是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

Use ng-class to create a chosenIndex variable in $scope to store the index of the currently selected li. The default is 0. Assume that the selected class is called chosenClass.

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