angular.js - ng-repeat嵌套循环出来的ul li,如何做到默认显示第一条Li是有样式,当前被点击的li有样式其他的li则无样式?
本文介绍了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" class="defaultClass" 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;
}
这篇关于angular.js - ng-repeat嵌套循环出来的ul li,如何做到默认显示第一条Li是有样式,当前被点击的li有样式其他的li则无样式?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文