AngularJS ng-repeat動態子json數組

Question

我有一個動態JSON，它包含名稱列表，它還包含兒童名稱作爲子集。我怎樣才能使用angularJS NG-重複顯示它的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是基於請求生成。兒童陣列是 可選擇的，它可能包含長度「N」

Answer 1

的校正的答案

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

Answer 2

您可以通過添加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" 
     } 
    ]; 
});