AngularJS ng-repeat 用于动态子 json 数组

Posted

技术标签:

【中文标题】AngularJS ng-repeat 用于动态子 json 数组【英文标题】:AngularJS ng-repeat for dynamic child json array 【发布时间】:2016-05-26 02:57:03 【问题描述】:

我有一个动态 JSON,其中包含名称列表,它还包含子名称作为子集。如何使用 angularJS ng-repeat 在 html UI 中显示它

示例动态 JSON 是

$scope.family = [
   
      "name":"Siva",
      "child":[
         
            "name":"Suriya"
         ,
         
            "name":"Karthick"
         
      ]
   ,
   
      "name":"Kumar",
      "child":[
         
            "name":"Rajini"
         ,
         
            "name":"Kamal"
         ,
         
            "name":"Ajith"
         
      ]
   ,
   
      "name":"Samer"
   ,
   
      "name":"Mahesh"
   
];

<div ng-repeat="members in family">
    <!-- How to Show it in the UI -->
</div>

注意:JSON 是基于 Request 生成的。子数组是 可选,它可能包含长度'n'

【问题讨论】:

它不是一个有效的 JSON。 @Rajesh 我更新了 JSON... 你可以试试这样的:JSFiddle 【参考方案1】:

您可以通过添加ng-if 指令来更好地回答,因为child可选。当然,它不会对您的应用产生任何影响,但它是一种很好的编码方式。

另外,不是在ul 上添加ng-repeat,而是应该在li 中。为单个列表循环 ul 是没有意义的。

请参考示例here。

HTML:

<div ng-app="app" ng-controller="test">
    <ul ng-repeat="member in family">
        <li>
            member.name
            <span ng-if="member.child.length > 0">
                <ul>
                    <li ng-repeat="c in member.child">c.name</li>
                </ul>
            </span>
        </li>
    </ul>
</div>

JS:

var app = angular.module('app', []);

app.controller('test', function ($scope) 
    $scope.family = [
       
           "name": "Siva",
           "child": [
              
                  "name": "Suriya"
              ,
              
                  "name": "Karthick"
              
           ]
       ,
       
           "name": "Kumar",
           "child": [
              
                  "name": "Rajini"
              ,
              
                  "name": "Kamal"
              ,
              
                  "name": "Ajith"
              
           ]
       ,
       
           "name": "Samer"
       ,
       
           "name": "Mahesh"
       
    ];
);

【讨论】:

【参考方案2】:

正确答案

<ul ng-repeat="member in family">
    <li>member.name
        <ul>
            <li ng-bind="c.name" ng-repeat="c in member.child"></li>
        </ul>
    </li>
</ul>

【讨论】:

以上是关于AngularJS ng-repeat 用于动态子 json 数组的主要内容,如果未能解决你的问题,请参考以下文章

ng-repeat 中表单的 AngularJs 动态名称

AngularJS:从 ng-repeat 动态分配控制器

在 angularjs 中使用 ng-repeat 创建动态表

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

AngularJS 获取ng-repeat的动态ng-model

AngularJs ng-repeat指令中怎么实现含有自定义指令的动态html