AngularJS过滤 - 多个表达式或动态链接过滤器？

如果你看看下面的代码，我想使用文本<input>来过滤每个菜单项的多个成分 - 例如，如果用户在<input>中输入“牛肉，培根”，应用程序将返回所有与牛肉或培根作为配料的菜单项目。AngularJS过滤 - 多个表达式或动态链接过滤器？

我目前正在尝试使用ng-filter来做到这一点，我猜我需要为此创建一个自定义过滤器。这是错误的做法？有没有办法动态链式过滤器呢？

下面是一些代码，应该让我的问题意识 -

我的搜索模式： - 注意：使用NG列表把字符串转换成字符串数组

<div ng-init="searchString=[]"> 
    <input type="text" ng-model="searchString" ng-list> 
</div>

我的重复循环： - 注意：使用自定义过滤器将每个成分加入到一个字符串中

<tr ng-repeat="item in menu | filter:{ category : 'Classics' } | filter:{ ingredients : searchString } "> 
    <td class="title">{{ item.title }}</td> 
    <td class="ingredients"> 
     {{ item.ingredients | join:', ' }} 
    </td> 
    <td class="price">{{ item.price | currency }}</td> 
</tr>

我的数据结构

$scope.menu = [ 
    { 
     "title" : "New Yorker", 
     "price" : "4.00", 
     "ingredients" : [ 
      "Salt Beef", 
      "Pickles", 
      "Mustard" 
     ], 
     "category" : "Classics" 
    }, 
    { 
     "title" : "BLT", 
     "price" : "4.00", 
     "ingredients" : [ 
      "Bacon", 
      "Lettuce", 
      "Tomato" 
     ], 
     "category" : "Classics" 
    } 
]

来源

2013-11-20 Mike

您可以创建自定义过滤器，或使用角度滤波与谓语（函数）

{ filter_expression | filter:predicateFunction }}

当然

，你的函数住在您的控制器的范围内，搜索字符串可见

谓词函数可用于编写任意过滤器。为数组的每个元素调用函数。最终结果是谓词返回true的那些元素的数组。

http://docs.angularjs.org/api/ng.filter:filter

来源

2013-11-24 20:10:04 surui

（我拿到这可能是一个死的问题，但我发现它也因此:)

因为要筛选至少共享菜单项需要一个自定义过滤器一种成分与您的搜索列表（即非空阵列相交）。在问题filter:{ ingredients : searchString }中使用的过滤器不会以这种方式进行过滤，也不会从其official doc内置到Angular中的任何其他过滤器。

创建自定义过滤器很简单;添加新功能containsIngredientsFromSearch到$scope：

// Filter functions are called separately for each item on the menu 
$scope.containsIngredientsFromSearch = function(menuItem){  
    // Check every ingredient on the search list ... 
    for(var i in $scope.searchString) { 
    var ingredient = $scope.searchString[i]; 
    // ... does it match an ingredient in menuItem.ingredients? 
    if(menuItem.ingredients.indexOf(ingredient) !== -1) { 
     // ... if so, stop searching and return true to include this menuItem 
     return true; 
    } 
    } 

    // No matching ingredient found? Return false to exclude this item. 
    return false; 
}

过滤器添加到现有的过滤器链：

<tr ng-repeat="item in menu | filter:{ category : 'Classics' } | filter:containsIngredientsFromSearch">

看到它在行动on JSBin。

来源

2014-04-11 18:28:00 GHH

AngularJS过滤 - 多个表达式或动态链接过滤器？

回答

相关问题