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 相关文章推荐
javascript实现上传图片前的预览(TX的面试题)
Aug 20 Javascript
javascript 面向对象全新理练之数据的封装
Dec 03 Javascript
jquery+ajax请求且带返回值的代码
Aug 12 Javascript
分享js粘帖屏幕截图到web页面插件screenshot-paste
Aug 21 Javascript
JavaScript 中 avalon绑定属性总结
Oct 19 Javascript
js移动焦点到最后位置的简单方法
Nov 25 Javascript
Vue.js自定义指令的用法与实例解析
Jan 18 Javascript
Bootstarp 基础教程之表单部分实例代码
Feb 03 Javascript
详解angular2封装material2对话框组件
Mar 03 Javascript
微信小程序 新建登录页并实现tabBar隐藏
Jun 13 Javascript
vue中v-model动态生成的实例详解
Oct 27 Javascript
JS实现为动态添加的元素增加事件功能示例【基于事件委托】
Mar 21 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
编写安全 PHP应用程序的七个习惯深入分析
2013/06/08 PHP
php curl post 时出现的问题解决
2014/01/30 PHP
php实现简单文件下载的方法
2015/01/30 PHP
PHP获取一年有几周以及每周开始日期和结束日期
2015/08/06 PHP
jscript之Open an Excel Spreadsheet
2007/06/13 Javascript
JS获取节点的兄弟,父级,子级元素的方法
2014/01/09 Javascript
使用javascript实现Iframe自适应高度
2014/12/24 Javascript
Javascript自执行匿名函数(function() { })()的原理浅析
2016/05/15 Javascript
JavaScript实现Java中Map容器的方法
2016/10/09 Javascript
微信小程序 122100版本更新问题解决方案
2016/12/22 Javascript
bootstrap制作jsp页面(根据值让table显示选中)
2017/01/05 Javascript
JS对象是否拥有某属性如何判断
2017/02/03 Javascript
JS三目运算(三元运算)方法详解
2017/03/01 Javascript
JQuery判断正整数整理小结
2017/08/21 jQuery
总结js中的一些兼容性易错的问题
2017/12/18 Javascript
angular4 JavaScript内存溢出问题
2018/03/06 Javascript
微信小程序实现发红包功能
2018/07/11 Javascript
vue绑定事件后获取绑定事件中的this方法
2018/09/15 Javascript
教你如何编写Vue.js的单元测试的方法
2018/10/17 Javascript
vue路由中前进后退的一些事儿
2019/05/18 Javascript
js实现简单贪吃蛇游戏
2020/05/15 Javascript
微信小程序tab左右滑动切换功能的实现代码
2021/02/08 Javascript
python 在指定范围内随机生成不重复的n个数实例
2019/01/28 Python
详解python算法之冒泡排序
2019/03/05 Python
python使用thrift教程的方法示例
2019/03/21 Python
html5 CSS过度-webkit-transition使用介绍
2013/07/02 HTML / CSS
详解HTML5中rel属性的prefetch预加载功能使用
2016/05/06 HTML / CSS
Douglas意大利官网:购买香水和化妆品
2020/05/27 全球购物
电气工程及自动化专业自荐书范文
2013/12/18 职场文书
经理管理专业毕业自荐书范文
2014/02/12 职场文书
大二法英学生职业生涯规划范文
2014/02/27 职场文书
竞选学生会演讲稿
2014/04/25 职场文书
优秀学生干部先进事迹材料
2014/05/26 职场文书
关于美容院的活动方案
2014/08/14 职场文书
县政协领导班子群众路线教育实践活动四风问题整改方案
2014/10/26 职场文书
git中cherry-pick命令的使用教程
2022/06/25 Servers