AngularJS ng-repeat 通过复杂和动态的 JSON 数组

Posted 2023-02-15

【中文标题】AngularJS ng-repeat 通过复杂和动态的 JSON 数组

【英文标题】：AngularJS ng-repeat through complex and dynamic JSON Array

【发布时间】：2021-01-19 23:27:06

【问题描述】：

我正在尝试使用 ng-repeat 选项从 JSON 数组向用户显示内容。 JSON Array 是动态创建的，所以我有点困惑如何向用户显示相同的内容。

JSON ARRAY的语法如下，COMPLEX key的内容可以动态增加或减少：

jsonList    =   [
                    
                        name    :   "AB",
                        local   :   "CD",
                        complex :   [
                                        name    :   "EF",
                                        local   :   "GH",
                                        complex :   [
                                                        name    :   "IJ",
                                                        local   :   "LL".
                                                        complex :   ........
                                                    ]
                                    ]
                    ,
                    
                        name    :   "PQ",
                        local   :   "RS",
                        complex :   [
                                        name    :   "TU",
                                        local   :   "VW",
                                        complex :   [
                                                        name    :   "XY",
                                                        local   :   "Z1".
                                                        complex :   ........
                                                    ]
                                    ]
                    
                    ......
                ];

我只是很困惑如何向用户显示这个。

我希望它看起来像这样，用户可以使用Add Another 选项在每一步添加complex 值：

我真的很困惑如何自动将值存储在JSON Array 中并使用ng-repeat 循环并自动显示给用户。由于JSON Array 不是固定的，并且在每个点上都可能会有所不同，因此有人可以帮助我了解如何处理此问题的一些逻辑。

我试图在html Table 中显示，但在有这么多complex 对象时如何循环感到困惑。

【参考方案1】：

我会使用自引用组件。根据您的数据，我在这里有一个示例。请注意，组件在其模板中使用自身。这样可以确保它可以永远持续下去

function myComponentController() 
  this.addNode = function(el) 
    el.complex.push(
      name: "New name",
      local: "New local",
      complex: [],
    );
  


const myComponentConstructor = 
  controller: myComponentController,
  controllerAs: "$ctrl",
  bindings: 
    data: '=',
  ,
  template: `
    <div ng-repeat="el in $ctrl.data" class="block">
      <span>Name: el.name</span>
      <my-component data="el.complex"></my-component>
      <button ng-click="$ctrl.addNode(el)">Add another</button>
    </div>
  `,


const app = angular
  .module("app", [])
  .component("myComponent", myComponentConstructor);

.block 
  border: solid 1px red;
  padding: 5px;
  margin: 5px;

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="app">
  <my-component data='[
    name: "AB",
    local: "CD",
    complex: [
      name: "EF",
      local: "GH",
      complex: [
        name: "IJ",
        local: "LL",
        complex: []
      ]
    ]
  ,
  
    name: "PQ",
    local: "RS",
    complex: [
      name: "TU",
      local: "VW",
      complex: [
        name: "XY",
        local: "Z1",
        complex: []
      ]
    ]
  ]'></my-component>
</div>