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 :   ........
                                                    ]
                                    ]
                    }
                    ......
                ];

我只是很困惑如何向用戶顯示這個。

我希望它看起來像這樣，用戶可以選擇使用“ Add Another選項在每一步添加complex數值：

我真的很困惑如何自動將值存儲在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>