[英]AngularJS ng-repeat through complex and dynamic JSON Array
I am trying to display the contents to the user from JSON Array using the ng-repeat
option.我正在尝试使用ng-repeat
选项从 JSON 数组向用户显示内容。 The JSON Array
is created dynamically so I am bit confused how to display the same to users. JSON Array
是动态创建的,因此我对如何向用户显示相同内容感到有些困惑。
The syntax of the JSON ARRAY
is as follows, the content of COMPLEX key
can increase or decrease dynamically: 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 : ........
]
]
}
......
];
I am just confused how can display this to users.我只是很困惑如何向用户显示这个。
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:我希望它看起来像这样,用户可以选择使用“ Add Another
选项在每一步添加complex
数值:
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.我真的很困惑如何自动将值存储在JSON Array
并使用ng-repeat
循环并自动显示给用户。 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.由于JSON Array
不是固定的,并且每个点都可能会有所不同,有人可以帮助我了解如何处理此问题的一些逻辑。
I tried to display in HTML Table
but confused how to loop when there is so many complex
objects.我试图在HTML Table
显示,但是当有这么多complex
对象时,我对如何循环感到困惑。
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.