用於動態子json數組的AngularJS ng-repeat

Question

我有一個動態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”

Answer 1

您可以通過添加ng-if指令來更好地解決問題，因為child是可選的 。 當然，它不會對您的應用程序產生任何影響，但這是編寫代碼的好方法。

另外，應該在li代替在ul上添加ng-repeat 。 在循環ul以獲得單個列表時沒有任何意義。

請在這里參考樣本。

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"
       }
    ];
});

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