angular.js - How to display the ul li from the nested loop of ng-repeat so that the first li has a style by default, and the currently clicked li has a style and the other li have no style?
我想大声告诉你
我想大声告诉你 2017-05-15 17:08:27
0
1
1498

Question: I use ng-repeat to loop out the data. How do I do this: 1. When opening the page, does the first li displayed by default have a style? 2. Does the currently clicked li have styles, while other li's have no styles?
The following is the html code diagram:

<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>
我想大声告诉你
我想大声告诉你

reply all(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;
}
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template