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

【问题标题】：AngularJS ng-repeat through complex and dynamic JSON ArrayAngularJS ng-repeat 通过复杂和动态的 JSON 数组
【发布时间】：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 对象时如何循环感到困惑。

【问题讨论】：

标签： javascript arrays json angularjs

【解决方案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>

【讨论】：