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


Posted in Javascript onJuly 24, 2017

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

Javascript 相关文章推荐
js实现浏览器的各种菜单命令比如打印、查看源文件等等
Oct 24 Javascript
给ListBox添加双击事件示例代码
Dec 02 Javascript
JQuery与JS里submit()的区别示例介绍
Feb 17 Javascript
jquery实现的鼠标下拉滚动置顶效果
Jul 24 Javascript
在AngularJS框架中处理数据建模的方式解析
Mar 05 Javascript
jQuery中设置form表单中action值的实现方法
May 25 Javascript
Angular.Js中过滤器filter与自定义过滤器filter实例详解
May 08 Javascript
解决VUE框架 导致绑定事件的阻止冒泡失效问题
Feb 24 Javascript
vuejs实现折叠面板展开收缩动画效果
Sep 06 Javascript
JS定义函数的几种常用方法小结
May 23 Javascript
如何手动实现一个 JavaScript 模块执行器
Oct 16 Javascript
Javascript的promise,async和await的区别详解
Mar 24 Javascript
深入理解React Native原生模块与JS模块通信的几种方式
Jul 24 #Javascript
浅析JavaScript中的平稳退化(graceful degradation)
Jul 24 #Javascript
vue.js移动端app实战1:初始配置详解
Jul 24 #Javascript
React 子组件向父组件传值的方法
Jul 24 #Javascript
浅谈Node.js ORM框架Sequlize之表间关系
Jul 24 #Javascript
vue 实现 tomato timer(蕃茄钟)实例讲解
Jul 24 #Javascript
jQuery实现拼图小游戏(实例讲解)
Jul 24 #jQuery
You might like
Ajax PHP 边学边练 之三 数据库
2009/11/26 PHP
通过dbi使用perl连接mysql数据库的方法
2014/04/16 PHP
ThinkPHP中公共函数路径和配置项路径的映射分析
2014/11/22 PHP
thinkPHP中多维数组的遍历方法
2016/01/09 PHP
php验证身份证号码正确性的函数
2016/07/20 PHP
利用 fsockopen() 函数开放端口扫描器的实例
2017/08/19 PHP
轻松创建nodejs服务器(10):处理POST请求
2014/12/18 NodeJs
使用CoffeeScrip优美方式编写javascript代码
2015/10/28 Javascript
javascript 数组的定义和数组的长度
2016/06/07 Javascript
微信小程序 教程之WXSS
2016/10/18 Javascript
深入研究jQuery图片懒加载 lazyload.js使用方法
2017/08/16 jQuery
gulp教程_从入门到项目中快速上手使用方法
2017/09/14 Javascript
seaJs使用心得之exports与module.exports的区别实例分析
2017/10/13 Javascript
JS去掉字符串中所有的逗号
2017/10/18 Javascript
使用 Javascript 实现浏览器推送提醒功能的示例
2017/11/03 Javascript
微信小程序中实现手指缩放图片的示例代码
2018/03/13 Javascript
js正则相关知识点专题
2018/05/10 Javascript
Vue与Node.js通过socket.io通信的示例代码
2018/07/25 Javascript
深入浅出理解JavaScript闭包的功能与用法
2018/08/01 Javascript
微信小程序开发之点击按钮退出小程序的实现方法
2019/04/26 Javascript
vue打包静态资源后显示空白及static文件路径报错的解决
2020/09/02 Javascript
[01:30:55]VG vs Mineski Supermajor 败者组 BO3 第三场 6.6
2018/06/07 DOTA
[52:12]FNATIC vs Infamous 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
Python isinstance函数介绍
2015/04/14 Python
Python+django实现文件上传
2016/01/17 Python
python输出100以内的质数与合数实例代码
2018/07/08 Python
详解Python_shutil模块
2019/03/15 Python
Python函数和模块的使用总结
2019/05/20 Python
django 基于中间件实现限制ip频繁访问过程详解
2019/07/30 Python
初次部署django+gunicorn+nginx的方法步骤
2019/09/11 Python
pycharm激活码有效到2020年11月底
2020/09/18 Python
python mock测试的示例
2020/10/19 Python
Python可视化工具如何实现动态图表
2020/10/23 Python
企业环保标语
2014/06/10 职场文书
安全施工责任书
2014/08/25 职场文书
2015年数学教研工作总结
2015/07/22 职场文书