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

问题描述

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

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

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

问题解答

用ng-class，在$scope中创建一个chosedIndex变量，存放当前选中的li的index，默认为0，假设选中的class叫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;}