热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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

这篇文章主要介绍了Angular中ng-repeat与ulli的多层嵌套重复问题,需要的朋友可以参考下

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


推荐阅读
  • C# 对象转 JSON 字符串的方法与应用
    本文介绍如何在 C# 中使用一般处理程序(ASHX)将对象转换为 JSON 字符串,并通过设置响应类型为 application/json 来确保客户端能够正确解析返回的数据。同时,文章还提供了 HTML 页面中不依赖 jQuery 的 AJAX 方法来接收和处理这些 JSON 数据的具体实现。 ... [详细]
  • 本文介绍了如何使用外向烧鹅IO库来封装GET请求的具体步骤,包括库的安装与配置、请求拦截器的设置以及如何在Vue项目中调用这些封装好的请求方法。 ... [详细]
  • 本文从数据埋点的设计者视角出发,全面解析数据埋点的技术原理、应用场景及其管理方法,涵盖基础知识、实施策略、数据处理流程等内容。 ... [详细]
  • 使用爬虫测试Django网站的稳定性
    本文介绍如何通过爬虫频繁访问Django网站以测试其稳定性和性能。首先需要禁用Django的CSRF保护,然后使用Python爬虫脚本进行POST请求测试。 ... [详细]
  • 本文详细介绍了如何使用JavaScript实现数据的双向绑定,包括MVVM架构的基本概念、不同框架下的实现方式以及具体的代码示例。 ... [详细]
  • 现代软件工程开发体验:结对编程
    距现代软件工程开课已经3周,按照课程安排,在最近的9天中,我们进行了极限编程模式的体验:pairwork(结对编程,具体见链接),对象是在academicsearchmap上添加一些新特性。经过选 ... [详细]
  • 本文提供了关于如何解决u8云服务器显示离线以及无法登录的问题的详细指南,包括可能的原因分析和解决方案。 ... [详细]
  • Qwik:一款创新的JavaScript框架,致力于提升网页应用的速度与响应性
    Qwik是一款新的JavaScript框架,旨在通过其独特的可恢复性机制,显著提高网页应用的加载速度和用户体验。 ... [详细]
  • 本文介绍了jsoncpp,一个强大的C++库,专注于JSON数据的解析和生成。文章提供了详细的使用示例和常见问题的解决方案。 ... [详细]
  • select下拉箭头改变,兼容ie8/9
    各个浏览器下select默认的下拉箭头差别较大,通常会清除默认样式,重新设计<html><head><metacharsetutf-8> ... [详细]
  • 本文介绍了如何在Angular CLI创建的项目中安装并配置Bootstrap,包括必要的依赖项jQuery和Popper.js的安装步骤。 ... [详细]
  • 本文详细探讨了在使用 npm 安装 node-sass 时遇到的 postinstall 脚本错误问题,并提供了有效的解决方案。问题主要源于安装源的配置不当。 ... [详细]
  • Elasticsearch排序机制详解
    本文深入探讨了Elasticsearch中的排序功能,包括相关性排序、字段值排序、多级排序及字符串和多值字段的排序策略,旨在帮助读者更好地理解和优化搜索结果。 ... [详细]
  • 本文深入探讨了在Java编程语言中,如何使用`org.apache.polygene.api.association.AssociationDescriptor.qualifiedName()`方法,并提供了多个实际应用的代码示例。这些示例源自GitHub、StackOverflow和Maven等知名平台,旨在帮助开发者更好地理解和应用这一方法。 ... [详细]
  • 使用SwiftyJSON第三方库时,有时会发现获取到的数据顺序出现混乱。本文将探讨这一现象的原因,并提供解决方案以确保数据按预期顺序排列。 ... [详细]
author-avatar
mobiledu2502860983
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有