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 在类别中时才显示菜单。我只有第一个类别循环中的项目，所有其他类别都是空的。

Categories 和 menuItem 是 2 个不同的数组。如果 menuItem 的类别在当前类别下，则应将其添加到页面。

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

Answer 1

我会更改我的数据表示以匹配您实际尝试显示的内容，如下所示：

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

这样您就可以像这样轻松匹配两个嵌套循环：

<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 数据，则必须进行过滤以提取要显示的内容。

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

Fiddle : JSFiddle

ng-repeat 里面的 ng-repeat

Ng-repeat inside ng-repeat

angularjs

ng-repeat