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

Question

我正在尝试使用该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 :   ........
                                                    ]
                                    ]
                    }
                    ......
                ];

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

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

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

我试图显示，HTML Table但当有这么多complex对象时，我很困惑如何循环。

Answer 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>