AngularJS的ng-repeat格式多层JSON
创始人
2024-10-27 07:33:28
0次

确保你已经引入了AngularJS库。下面是一个演示如何使用ng-repeat来处理多层JSON格式的代码示例:

HTML代码:

  • {{ item.name }}
    • {{ subItem.name }}
      • {{ subSubItem.name }}

JavaScript代码:

angular.module('myApp', [])
.controller('myCtrl', function($scope) {
  $scope.data = [
    {
      name: 'Item 1',
      items: [
        {
          name: 'Sub Item 1',
          subItems: [
            { name: 'Sub Sub Item 1' },
            { name: 'Sub Sub Item 2' }
          ]
        },
        {
          name: 'Sub Item 2',
          subItems: [
            { name: 'Sub Sub Item 3' },
            { name: 'Sub Sub Item 4' }
          ]
        }
      ]
    },
    {
      name: 'Item 2',
      items: [
        {
          name: 'Sub Item 3',
          subItems: [
            { name: 'Sub Sub Item 5' },
            { name: 'Sub Sub Item 6' }
          ]
        },
        {
          name: 'Sub Item 4',
          subItems: [
            { name: 'Sub Sub Item 7' },
            { name: 'Sub Sub Item 8' }
          ]
        }
      ]
    }
  ];
});

上述代码使用ng-repeat指令嵌套多层循环来迭代多层JSON数据。在示例中,我们有一个包含三个层级的JSON对象数组。在HTML中,我们使用ng-repeat指令来迭代data数组,并依次访问每个层级的对象属性。

在这个示例中,第一层的ng-repeat循环迭代data数组的每个对象。第二层ng-repeat循环迭代每个对象的items数组。第三层ng-repeat循环迭代每个subItem对象的subItems数组。

运行这段代码,你将看到多层JSON数据被正确地展示在HTML页面上。

相关内容

热门资讯

前端-session、jwt 目录:   (1)session (2&#x...
linux入门---制作进度条 了解缓冲区 我们首先来看看下面的操作: 我们首先创建了一个文件并在这个文件里面添加了...
关于测试,我发现了哪些新大陆 关于测试 平常也只是听说过一些关于测试的术语,但并没有使用过测试工具。偶然看到编程老师...
前缀和与对数器与二分法 1. 前缀和 假设有一个数组,我们想大量频繁的去访问L到R这个区间的和,...
nodejs:本地安装nvm实... 一、背景-使用不同版本node的原因 vue3+ts、nuxt3版本,node...
JAVA集合知识整理 Java集合知识整理 HashMap相关 HashMap的底层数据结构:jdk1.8之...
无刷直流电机介绍及单片机控制实... 无刷直流电机介绍及单片机控制实例前言基本概念优势与劣势使用寿命基本结构使用单片机控制实例电子调速器&...
fwdiary(2) dp2 1.传纸条  AcWing 275. 传纸条 - AcWing 走两条路,走一条最大的...
常用的DOS命令 常用的DOS命令 DOS(Disk Operating System,磁...
<C++> 类和对象(下) 1.const成员函数将const修饰的“成员函数”称之为const成员函数,cons...