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

@ 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

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

在ng-repeat内重复Ng

2 个答案: