ng-repeat с вложенными массивами

Question

ng-repeat с вложенными массивами

0

Я получаю следующие данные из моего 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_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

Любое руководство

moh_abk 23 янв. 2016, в 21:52

Источник

Теги:

javascript

angularjs

arrays

3 ответа

Ещё вопросы

Sabarish Senthilnathan · Answer 1 · 2016-01-23T19-22-00.000Z

Рабочий плункер - 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

Надеюсь, это ответили на ваш вопрос.

Nora · Answer 2 · 2016-01-23T18-31-00.000Z

Вы можете попробовать это (вместо названия вы можете использовать любое свойство, которое вы установили):

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

AlainIb · Answer 3 · 2016-01-23T18-27-00.000Z

Вы можете использовать древовидное представление для отображения данных

Взгляните на это: 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 к этому