Angular中ng-repeat与ul li的多层嵌套重复问题

学习ng-repeat的过程中常常使用到ng-repeat=”item in array”来循环输出所需要的元素，但是当我们需要使用ng-repeat进行多层嵌套时则容易出现数据重复的问题。

如在加载与点击事件于js中进行两次http请求获取data分别为list01[]数组和list02[]赋值再如下显示则会导致it1下每个ul都会重复输出list02[]数组中的内容

<ul ng-repeat="it1 in list01">
  <li ng-click="show(it1)">{{it1.value}}</li>
  <ul ng-repeat="it2 in list02">
    <li>{{it2.value}}</li>
  </ul>
</ul>

输出如：

  1-1
  1-2
  1-1
  1-2

而非

  1-1
  1-2
  2-1
  2-2

其实这个也不是问题，只要换一种思维方式将列表和父级元素相关联形成树状结构就好了

HTML中代码如下

<ul ng-repeat="it1 in list01">
  <li ng-click="show(it1)">{{it1.name}}</li>
  <ul ng-repeat="it2 in it1.child" ng-show="it1.showChild" style="text-indent:10px;">
    <li ng-click="show(it1, it2)">{{it2.name}}</li>
    <ul ng-repeat="it3 in it2.child" ng-show="it2.showChild" style="text-indent:10px;">
      <li ng-click="show(it1, it2, it3)">{{it3.name}}</li>
      <ul ng-repeat="it4 in it3.child" ng-show="it3.showChild">
        <li>{{it4.name}}</li>
      </ul>
    </ul>
  </ul>
</ul>

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的多层嵌套，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

# ng  # repeat  # ul  # li  # 多层嵌套  # angularjs  # AngularJS实践之使用ng-repeat中$index的注意点  # AngularJS 获取ng-repeat动态生成的ng-model值实例详解  # AngularJS ng-repeat数组有重复值的解决方法  # AngularJs ng-repeat 嵌套如何获取外层$index  # AngularJS使用自定义指令替代ng-repeat的方法  # AngularJS使用ng-repeat指令实现下拉框  # 小编  # 都是  # 在此  # 两次  # 树状  # 给大家  # 相关联  # 分别为  # 当我们  # 而非  # 所需要  # 如在  # 则会  # 所述  # 给我留言  # 思维方式  # 感谢大家  # 过程中  # 再如  # 组中 

相关文章： 高防网站服务器：DDoS防御与BGP线路的AI智能防护方案  建站之星安装提示数据库无法连接如何解决？  建站之星安全性能如何？防护体系能否抵御黑客入侵？  公司网站制作费用多少,为公司建立一个网站需要哪些费用？  公司网站建设制作费用,想建设一个属于自己的企业网站，该如何去做？  网站好制作吗知乎,网站开发好学吗？有什么技巧？  官网自助建站系统：SEO优化+多语言支持，快速搭建专业网站  已有域名和空间如何搭建网站？  品牌网站制作公司有哪些,买正品品牌一般去哪个网站买？  ,石家庄四十八中学官网？  建站主机CVM配置优化、SEO策略与性能提升指南  如何访问已购建站主机并解决登录问题？  网站插件制作软件免费下载,网页视频怎么下到本地插件？  如何通过西部建站助手安装IIS服务器？  Android使用GridView实现日历的简单功能  零服务器AI建站解决方案：快速部署与云端平台低成本实践  ,柠檬视频怎样兑换vip？  已有域名和空间如何快速搭建网站？  东莞专业网站制作公司有哪些,东莞招聘网站哪个好？  如何在阿里云域名上完成建站全流程？  高端企业智能建站程序：SEO优化与响应式模板定制开发  制作网站的公司有哪些,做一个公司网站要多少钱？  C++如何使用std::optional？（处理可选值）  贸易公司网站制作流程,出口贸易网站设计怎么做？  如何在Golang中使用encoding/gob序列化对象_存储和传输数据  开封网站制作公司,网络用语开封是什么意思？  济南专业网站制作公司,济南信息工程学校怎么样？  建站之星在线客服如何快速接入解答？  重庆网站制作公司哪家好,重庆中考招生办官方网站？  南宁网站建设制作定制,南宁网站建设可以定制吗？  Avalonia如何实现跨窗口通信 Avalonia窗口间数据传递  nginx修改上传文件大小限制的方法  实现点击下箭头变上箭头来回切换的两种方法【推荐】  如何基于云服务器快速搭建网站及云盘系统？  寿县云建站：智能SEO优化与多行业模板快速上线指南  手机网站制作平台,手机靓号代理商怎么制作属于自己的手机靓号网站？  建站之星后台管理如何实现高效配置？  建站VPS推荐：2025年高性能服务器配置指南  中山网站推广排名,中山信息港登录入口？  想学网站制作怎么学,建立一个网站要花费多少？  一键网站制作软件,义乌购一件代发流程？  西安制作网站公司有哪些,西安货运司机用的最多的app或者网站是什么？  如何在Tomcat中配置并部署网站项目？  如何选择网络建站服务器？高效建站必看指南  胶州企业网站制作公司,青岛石头网络科技有限公司怎么样？  代刷网站制作软件,别人代刷火车票靠谱吗？  建站主机解析：虚拟主机配置与服务器选择指南  建站主机无法访问？如何排查域名与服务器问题  如何在阿里云高效完成企业建站全流程？  如何用好域名打造高点击率的自主建站？