过滤 ng-repeat 更多次

Question

我正在创建一个应用程序来管理餐厅订单。

我从 $http 创建菜单，所以我有这个列表：

<div class="row vertical" style="background-image: url(/gest/images/etichette/ANTIPASTI.png);border-color: #0CF">
          <div class="card piatti col s2" ng-repeat="anti in antis | filter:{tipo:'ANTIPASTI'}">
<div class="card-content"> <span class="card-title truncate red darken-3">{{anti.piatto}}</span> </div>
            <div class="card-action"> <a href="#" ng-repeat="n in [1, 2, 3, 4, 5]" ng-click="insert(n,com,anti.id,anti.tipo,marcia)">{{n}}</a></div>
          </div>
        </div>

“垂直行”类的 div 包含一次性开胃菜，然后是意大利面，然后是牛肉 ecc。 所以我每次都使用ng-repeat，并按tipo过滤。 我的问题是：有什么方法可以让 ng-repeat 只显示一次以显示所有菜单（先点菜，然后是意大利面，牛肉 ecc）？

我有这个数据（是餐厅菜单）：

• piatto：菜名
• tipo: 菜品类别（如意大利面、牛肉、鱼、开胃菜等）

我会只重复一次显示所有订购的菜肴：

starters, pasta, beef, fish, dessert etc. 

而且我每次都会创建一个新行

Answer 1

好的，你的例子很完美，但我每次都会重复“tipo”，然后是列表中的相对“piato”......像这样：

开胃菜 - 布鲁斯凯塔 - 供应 - 炸薯条

PRIMI - 卡克博纳拉 - amatriciana

等等

有可能吗？

Answer 2

据我了解，您已经在antis 上找到了所有日期，而您只想按类型过滤它或您想按某种类型订购吗？

例如fiddle 将按名称排序，但您也可以提供一个数组，其中包含以您喜欢的方式检索每种类型的函数，您可以阅读它here。

但基本上你会这样做

anti in antis | orderBy:'+tipo'

或

anti in antis | orderBy: [ function(){}, function(){} ]

编辑：

正如@yarons 提到的，您还可以链接字符串以进一步过滤。我已经更新了Fiddle，所以现在过滤器将是anti in antis | orderBy:['+tipo', '+piato']"，这表明首先tipo将按字母顺序升序（+指示），然后piato也将按字母升序。

如果您想定义与字母顺序不同的顺序，我认为您可以对tipo 使用一种 ENUM，如下所示：

var tipoENUM = {};
tipoENUM['ANIPASTI'] = 0;
tipoENUM['PASTA'] = 1;
tipoENUM['PIZZA'] = 2;
tipoENUM['BEEF'] = 3;
tipoENUM['DESERT'] = 4;

这样您就可以避免在订单中使用字符串，请参阅下面的fiddle 示例。

编辑 2：

好的，所以如果您通过 HTTP 请求接收数据，最好创建一个订单函数来帮助您，检查此updated fiddle，如下所示：

// The enum would be defined as before but:
$scope.orderTipo = function (dish) {
    return tipoENUM[dish.tipo];
}

在 HTML 上你会做：

ng-repeat="anti in antis | orderBy:[orderTipo, '+piato']"