2016-05-06 5 views
0

オブジェクト:NGリピート私は現在、私はこのような、複雑なJSONオブジェクトの小さなサンプルを作ってるんだangularjs 1.5.0 を学んでいる

{ 
"Families":[ 
    { 
     "Name": "A", 
     "Age": 1, 
     "Children": [ 
      { 
       "Name": "B", 
       "Age": 2, 
       "Children":[ 
        { 
         "Name": "C", 
         "Age": 3 
        }, 
        { 
         "Name": "D", 
         "Age": 4 
        } 
       ] 
      } 
     ] 
    }, 
    { 
     "Name": "X", 
     "Age": 5, 
     "Children":[ 
      { 
       "Name": "Y", 
       "Age": 2 
      }, 
      { 
       "Name": "Z", 
       "Age": 4 
      } 
     ] 
    } 
] 

}

あなたと家族には多くのメンバーがいて、各メンバーには名前、年齢、子供がいます。私はこのファミリーツリーを挙げておきたいが、一つのことは難しい。メンバーが何人いるか分からないので、ng-repeatを使ってリストする方法がわからない。

誰でも教えてください。 ありがとう、

+2

のhttpをレンダリングする

、このような観点で
<script type="text/ng-template" id="familyTree"> {{ family .name}} <ul ng-if="family.children"> <li ng-repeat="family in family.children" ng-include="'familyTree'"> </li> </ul> </script> 

と使用NGリピート以下のようなテンプレートを作成します。 io/blog/angularjs-recursive-templates –

+0

ここでは、Jordan.JDのコメントの例では、カテゴリとその再帰的な追加方法:[http://jsfiddle.net/Lgosoxks/](http://jsfiddle.net/Lgosoxks/) – dylpickle

答えて

6

再帰的なjsonデータ配列を表示するには、ビューで再帰的なテンプレートを使用します。 //ベン・フォスター: はビュー

<ul> 
    <li ng-repeat="family in families" ng-include="'familyTree'"></li> 
    </ul> 

サンプルfiddle

よりdetails

+1

ありがとうございました:D – Redplane

関連する問題