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 相关文章推荐
jquery根据锚点offset值实现动画切换
Sep 11 Javascript
javascript数组去重的方法汇总
Apr 14 Javascript
简单分析javascript面向对象与原型
May 21 Javascript
纯javascript移动优先的幻灯片效果
Nov 02 Javascript
跟我学习javascript的严格模式
Nov 16 Javascript
简单了解JavaScript操作XPath的一些基本方法
Jun 03 Javascript
深入理解JS中的Function.prototype.bind()方法
Oct 11 Javascript
微信小程序中的onLoad详解及简单实例
Apr 05 Javascript
如何使用50行javaScript代码实现简单版的call,apply,bind
Aug 14 Javascript
bootstrapValidator表单校验、更改状态、新增、移除校验字段的实例代码
May 19 Javascript
JS定时器如何实现提交成功提示功能
Jun 12 Javascript
Vue文本模糊匹配功能如何实现
Jul 30 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 HTML JavaScript MySQL代码如何互相传值的方法分享
2012/09/30 PHP
php fsockopen解决办法 php实现多线程
2014/01/20 PHP
php-fpm配置详解
2014/02/12 PHP
PHP实现获取客户端IP并获取IP信息
2015/03/17 PHP
codeigniter发送邮件并打印调试信息的方法
2015/03/21 PHP
php实现当前页面点击下载文件的简单方法
2016/09/22 PHP
PHP读MYSQL中文乱码的快速解决方法
2016/10/01 PHP
php获取当前url地址的方法小结
2017/01/10 PHP
PHP CURL中传递cookie的方法步骤
2019/05/09 PHP
JavaScript和JQuery实用代码片段(一)
2010/04/07 Javascript
javascript textContent与innerText的异同分析
2010/10/22 Javascript
使用jQuery Ajax功能时需要注意的一个问题(内存溢出)
2012/05/30 Javascript
JavaScript不刷新实现浏览器的前进后退功能
2014/11/05 Javascript
javascript组合使用构造函数模式和原型模式实例
2015/06/04 Javascript
jquery验证邮箱格式并显示提交按钮
2015/11/07 Javascript
JavaScript中Array的实用操作技巧分享
2016/09/11 Javascript
js实现九宫格的随机颜色跳转
2017/02/19 Javascript
微信小程序 商城开发(ecshop )简单实例
2017/04/07 Javascript
javascript实现Java中的Map对象功能的实例详解
2017/08/21 Javascript
12 种使用Vue 的最佳做法
2020/03/30 Javascript
使用SAE部署Python运行环境的教程
2015/05/05 Python
浅析Python中signal包的使用
2015/11/13 Python
python中的内置函数max()和min()及mas()函数的高级用法
2018/03/29 Python
python 按照固定长度分割字符串的方法小结
2018/04/30 Python
解决.ui文件生成的.py文件运行不出现界面的方法
2019/06/19 Python
在pandas中遍历DataFrame行的实现方法
2019/10/23 Python
Python爬虫回测股票的实例讲解
2021/01/22 Python
Python数据模型与Python对象模型的相关总结
2021/01/26 Python
使用CSS3来代替JS实现交互
2017/08/10 HTML / CSS
windeln官方海外旗舰店:德淘超人气母婴超市
2017/12/15 全球购物
KENZO官网:高田贤三在法国创立的品牌
2019/05/16 全球购物
SQL Server面试题
2013/04/04 面试题
资产经营总监岗位职责
2013/12/04 职场文书
个性与发展自我评价
2014/02/11 职场文书
考试诚信承诺书
2014/05/23 职场文书
市场调研项目授权委托书范本
2014/10/04 职场文书