ng-重复嵌套数组
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
感谢任何指导
你可以试试这个(而不是标题,你可以使用你设置的任何属性):
<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 数据适应此
Working plunker - http://plnkr.co/edit/fjDsJbmd7DIlBK3xrdyu。
使用ng-repeat
将menu_items
分组到menu_categories
下
<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
希望这回答了你的问题。
相关文章:
- 从多维嵌套json数组创建下拉列表
- 如何通过json对象数组为嵌套对象赋值
- 为循环嵌套的Javascript未按预期返回数组
- 具有嵌套对象数组的 Javascript 对象的递归搜索函数
- 将js对象更改为使用嵌套的可观察数组敲除js视图模型
- MongoDB嵌套对象数组后查询
- 从对象数组中动态创建嵌套json
- 使用Angular.js解析JSON中的嵌套对象数组
- 如何将id数组与带下划线的对象数组嵌套属性进行比较
- 将JS对象数组转换为嵌套形式的最有效方法
- 在javascript/angular中创建播放列表(按值复制数组,但按引用设置嵌套对象)
- 嵌套在 ng 重复中的拼接数组
- JavaScript格式的对象数组嵌套到子对象中
- JSON 将对象数组嵌套到表
- 如何获取数组嵌套对象子对象的父对象| MeteorJs-Astronomy
- 从数组嵌套JSON
- 使用AngularJS的JSON对象在数组嵌套在一个数组中,我怎么能得到数据到html
- 深入研究JavaScript中的一组嵌套对象
- 如何获得数组嵌套在对象的总和
- 将数组嵌套到主干模型中