ng-repeat 里面的 ng-repeat [英] 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>

我希望在另一个循环中包含一个 ng-repeat 循环，并且仅当 menuItem 在该类别中时才显示菜单.我只有第一个类别循环中的项目，所有其他类别都是空的.

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

menuItems = {{name:dish1, category:soup},{名称:dish2，类别:牛肉}}类别 = {牛肉，汤}

解决方案

@show-me-the-code : Bill Bi 有两个不同的数组.因此，如我的评论中所述，实现此目的的最佳选择是通过内部循环过滤.

这是带有内部循环过滤器的最终代码.我包括提琴手以供快速参考.

<ul ng-repeat="分类分类"><li>{{cate}}</li><li ng-repeat="menuItem in menuItems | filter:{category: cate}">{{menuItem.name}}</li>
功能 testCtrl($scope) {$scope.menuItems = [{name: 'dish1', category:'soup'},{名称:'dish2'，类别:'牛肉'}];$scope.categories = ['牛肉'，'汤']}

小提琴:JSFiddle

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

解决方案

@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

这篇关于ng-repeat 里面的 ng-repeat的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！