Повторить внутри повтора

0
<ul ng-repeat="cate in restaurant.categories"><li>{{cate}}</li>
    <li ng-repeat="menuItem in restaurant.menuItems" ng-show="menuItem.category == cate">{{menuItem.name}}</li></ul>

Я хочу один цикл ng-repeat внутри другого и показать меню только в том случае, если элемент menuItem находится в категории. У меня есть только элементы в цикле первой категории и пустые для всех других категорий.

Категории и menuItem - это два разных массива. Если категория menuItem находится под текущей категорией, она должна быть добавлена на страницу.

menuItems = {{name: dish1, category:soup},
             {name: dish2, category:beef}}
categories = {beef, soup}                 
  • 0
    Вам нужно будет показать пример данных categories и menuItems и / или в идеале пример Plunker.
  • 0
    Вам нужно использовать фильтр во внутреннем ng-repeat для фильтрации второго массива. Просто поделитесь здесь всем своим массивом, и я помогу вам добиться этого.
Теги:
ng-repeat

2 ответа

2
Лучший ответ

@show-me-the-code: Bill Bi имеет два разных массива. Поэтому наилучшим вариантом для этого является фильтр внутри цикла, как указано в моем комментарии.

Вот окончательный код с фильтром для внутреннего цикла. Я включил скрипач для быстрой справки.

<div ng-app ng-controller="testCtrl">
    <ul ng-repeat="cate in categories">
        <li>{{cate}}</li>
        <li ng-repeat="menuItem in menuItems | filter:{category: cate}">{{menuItem.name}}</li>
    </ul>
</div>

function testCtrl($scope) {
    $scope.menuItems = [{name: 'dish1', category:'soup'},
             {name: 'dish2', category:'beef'}];
    $scope.categories = ['beef', 'soup']
}

Сценарий: JSFiddle

  • 0
    Я бы сделать сравнение фильтра строго, чтобы избежать матчей , где menuItem.category содержит cate , например , | filter:{category: cate}:true
  • 0
    Да, это прекрасно работает для меня.
Показать ещё 1 комментарий
0

Я бы изменил свое представление данных в соответствии с тем, что вы на самом деле пытаетесь показать следующим образом:

$scope.restaurant = {
    categories: [{
        name: "beef",
        menuItems: [{
            name: "dish1",
            "price": "$10"
        }, {
            name: "dish2",
            "price": "$15"
        }]
    }, {
        name: "soup",
        menuItems: [{
            name: "dish1",
            "price": "$20"
        }, {
            name: "dish2",
            "price": "$25"
        }]
    }]
};

Таким образом, вы можете легко совместить свои две вложенные циклы следующим образом:

<div ng-app ng-controller="testCtrl">
    <ul ng-repeat="cate in restaurant.categories">
        <li>{{cate.name}}</li>
        <li ng-repeat="menuItem in cate.menuItems">{{menuItem.name}} - {{menuItem.price}}</li>
    </ul>
</div>

Посмотрите эту скрипку, если вы хотите увидеть ее в действии. Если вам нужно придерживаться данных JSON, вам придется выполнять фильтрацию, чтобы вытащить содержимое, которое вы хотите отобразить.

  • 0
    Это хороший выбор, но мне не разрешено менять базу данных

Ещё вопросы

Сообщество Overcoder
Наверх
Меню