NG-重复内NG重复 [英] Ng-repeat inside ng-repeat

问题描述

 ＆LT; UL NG重复=美食在restaurant.categories＆GT;＆LT;立GT; {{美食}}＆LT; /李＆GT;
    ＆LT;李NG重复=菜单项中restaurant.menuItemsNG秀=menuItem.category ==美食＆GT; {{menuItem.name}}＆LT; /李＆GT;＆LT; / UL＆GT;
 

我要在另一个并且只显示当菜单项是该类别中的一级菜单NG-重复循环。我只有第一类循环项目，空所有其他类别。

类别和菜单项是2个不同的阵列。如果该菜单项的类别是当前的类别下它应该被添加到页面。

 菜单项= {{名称：dish1，类别：汤}，
             {名称：dish2，类别：牛肉}}
类别= {牛肉，汤}
 

解决方案

@见真章-任何─code：比尔毕有两个不同的数组。因此，要实现这一目标的最佳选择是通过里面环路滤波器在我的评论说。

下面是最后的code。与过滤器内循环。我包括为快速参考小提琴手。

 ＆LT; D​​IV NG-NG应用程序控制器=testCtrl＆GT;
    ＆LT; UL NG重复=美食类别中的＆GT;
        ＆LT;立GT; {{美食}}＆LT; /李＆GT;
        ＆LT;李NG重复=菜单项中的菜单项|过滤器：{类别：美食}＆GT; {{menuItem.name}}＆LT; /李＆GT;
    ＆LT; / UL＆GT;
＆LT; / DIV＆GT;功能testCtrl（$范围）{
    $ scope.menuItems = [{名称：'dish1'，类别：'汤'}，
             {名称：'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-重复内NG重复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！