Ng-repeat внутри ng-repeat

Question

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

Answer 1

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

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

<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'] 
} 

Fiddle: JSFiddle

Answer 2

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

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

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