这篇文章主要介绍了Angular中ng-repeat与ul li的多层嵌套重复问题,需要的朋友可以参考下
学习ng-repeat的过程中常常使用到ng-repeat=”item in array”来循环输出所需要的元素，但是当我们需要使用ng-repeat进行多层嵌套时则容易出现数据重复的问题。
如在加载与点击事件于js中进行两次http请求获取data分别为list01[]数组和list02[]赋值再如下显示则会导致it1下每个ul都会重复输出list02[]数组中的内容
- {{it1.value}}
- {{it2.value}}
输出如：
1-1 1-2 1-1 1-2
而非
1-1 1-2 2-1 2-2
其实这个也不是问题，只要换一种思维方式将列表和父级元素相关联形成树状结构就好了
HTML中代码如下
- {{it1.name}}
- {{it2.name}}
- {{it3.name}}
- {{it4.name}}
js中代码如下
$http.get('ng01.json').success(function (_data) { $scope.list01 = []; $scope.list01 = _data.data; }); $scope.show = function (it1, it2, it3) { if(it3 != null){ $http.get("ng04.json").success(function (_data) { $scope.list04 = []; $scope.list04 = _data.data; for(var x in $scope.list03){ $scope.list03[x].showChild = false; } it3.showChild = true; it3.child = _data.data; }); return; } if(it2 != null){ $http.get("ng03.json").success(function (_data) { $scope.list03 = []; $scope.list03 = _data.data; for(var x in $scope.list02){ $scope.list02[x].showChild = false; } it2.showChild = true; it2.child = _data.data; }); return; } $http.get("ng02.json").success(function (_data) { $scope.list02 = []; $scope.list02 = _data.data; for(var x in $scope.list01){ $scope.list01[x].showChild = false; } it1.showChild = true; it1.child = _data.data; }); }json文件都是这样的
{ "success":1, "data":[ {"name":"01"}, {"name":"02"} ] }总结
以上就是Angular中ng-repeat与ul li的多层嵌套重复问题的详细内容，更多请关注易知道|edz.cc其它相关文章！
