ng-repeat with recursive attributes object

时间:2016-05-06 18:48:35

标签: angularjs

我目前正在学习angularjs 1.5.0 我正在用一个复杂的json对象制作一个小样本,如下所示:

{
"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列出它们。

有人能帮帮我吗? 非常感谢你,

1 个答案:

答案 0 :(得分:8)

要显示递归json数据数组,请在视图中使用递归模板。 创建如下的模板

    <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-repeat来渲染视图

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

示例fiddle

更多details