Ng-repeat inside ng-repeat

问题

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

I want one ng-repeat loop inside another and to show the menu only if the menuItem is in the category. I only have items in the first category loop, and empty for all the other categories.

Categories and menuItem are 2 different arrays. If the menuItem's category is under the current category it should be added to the page.

menuItems = {{name: dish1, category:soup},
             {name: dish2, category:beef}}
categories = {beef, soup}

回答1:

@show-me-the-code : Bill Bi has two different array. So the best option to achieve this is by filter in inside loop as stated in my comment.

Here is the final code with filter for inside loop. I am including fiddler for quick reference.

<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

回答2:

I would change my data representation to match what you are actually trying to display like so:

$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"
        }]
    }]
};

This way you could easily match your two nested loops like this:

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

Check out this fiddle if you would like to see it in action. If you need to stick to your JSON data, you will have to do filtering to pull the contents you want to display.

来源：https://stackoverflow.com/questions/32961053/ng-repeat-inside-ng-repeat

标签

angularjs

ng-repeat