[英]ng-repeat with nested arrays
我從我的REST API
接收以下數據
[
{
// restaurant details
},
"city": {}, // city details
"location": {}, // location details
"menu_categories": [
{
// menu_categories details
"menu_items": [
{
// menu_items details
"menu_modifier_groups": [
{
// menu_modifier_groups details
"menu_modifier_items": []
}
]
}
]
}
]
}
]
在這個數據,我獲取其單一餐廳menu_categories
是再有一個孩子menu_items
,然后有一個孩子menu_modifier_groups
,然后有一個孩子menu_modifier_item
。
如您所見,我有彼此嵌套的數組。 我想用ng-repeat
分組menu_items
下menu_categories
。 如下所示;
menu_category 1
menu_item 1
menu_item 2
menu_category 2
menu_item 3
menu_item 4
另外,如何在僅一個陣列上使用ng-repeat
? 我已將數據分配給$scope.restuarant
任何指導表示贊賞
您可以嘗試使用此方法(可以使用您設置的任何屬性來代替title):
<ul>
<li data-ng-repeat="category in restaurant.menu_categories">
{{ category.title }}
<ul data-ng-if="category.menu_items">
<li data-ng-repeat="item in category.menu_items">{{ item.title }}</li>
</ul>
</li>
</ul>
您可以使用樹形視圖顯示數據
看看這個: http : //ngmodules.org/modules/angular.treeview或此鏈接https://github.com/eu81273/angular.treeview (相同)
以這個數據為例:
$scope.treedata =
[
{ "label" : "User", "id" : "role1", "children" : [
{ "label" : "subUser1", "id" : "role11", "children" : [] },
{ "label" : "subUser2", "id" : "role12", "children" : [
{ "label" : "subUser2-1", "id" : "role121", "children" : [
{ "label" : "subUser2-1-1", "id" : "role1211", "children" : [] },
{ "label" : "subUser2-1-2", "id" : "role1212", "children" : [] }
]}
]}
]},
{ "label" : "Admin", "id" : "role2", "children" : [] },
{ "label" : "Guest", "id" : "role3", "children" : [] }
];
您可以輕松地將其余的api數據適應於此
工作plunker - http://plnkr.co/edit/fjDsJbmd7DIlBK3xrdyu 。
要組menu_items
下menu_categories
采用ng-repeat
<ul ng-repeat="(key, value) in restaurant" ng-init="outerIndex = $index">
menu_category {{$index + 1}}
<li ng-init="innerIndex = $index" ng-repeat="menu_cat in value.menu_categories">
menu_item {{($parent.$index*value.menu_categories.length)+($index+1)}}
</li>
</ul>
輸出將是:
menu_category 1
- menu_item 1
- menu_item 2
menu_category 2
- menu_item 3
- menu_item 4
menu_category 3
- menu_item 5
- menu_item 6
希望這回答了您的問題。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.