通过复杂且动态的JSON数组进行AngularJS ng-repeat

问题描述

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

I am trying to display the contents to the user from JSON Array using the ng-repeat option. The JSON Array is created dynamically so I am bit confused how to display the same to users.

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

The syntax of the JSON ARRAY is as follows, the content of COMPLEX key can increase or decrease dynamically:

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

我只是很困惑如何将其显示给用户.

I am just confused how can display this to users.

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

I want it to look something like this where the user has the option to add the complex values at every step using the Add Another option:

我真的很困惑如何自动将值存储在JSON Array中并使用ng-repeat使其循环并自动显示给用户.由于JSON Array并不是固定的，并且可能随时随地变化，因此有人可以在解决该问题的方法上为我提供一些逻辑上的帮助吗.

I am really confused how to store the values in JSON Array automatically and loop though it using the ng-repeat and display to users automatically. Since the JSON Array is not fixed and can vary at every point, can someone please help me with some logic on how to proceed for this issue.

我试图在HTML Table中显示，但困惑了complex对象太多时如何循环.

I tried to display in HTML Table but confused how to loop when there is so many complex objects.

推荐答案

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

I'd use a self-referencing component. I have an example here, based on your data. Note that the component uses itself in its template. This makes sure that it can continue forever if it wants to

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>

这篇关于通过复杂且动态的JSON数组进行AngularJS ng-repeat的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！