首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >使用ng-repeat按多列过滤

使用ng-repeat按多列过滤
EN

Stack Overflow用户
提问于 2013-12-31 08:21:54
回答 7查看 64K关注 0票数 19

我想知道在Angular中是否有一种简单的方法可以使用ng-repeat对特定列使用or逻辑而不是and来过滤表。现在,我的过滤器正在搜索表中的所有内容(10+列的数据),而实际上它只需要过滤两列数据(ID和Name)。

我已经设法让它在过滤时只查看这两列(by using an object in the filter expression as per the docs和查看this SO answer),但它使用的是and逻辑,这太具体了。我想让它使用or逻辑,但我遇到了麻烦。

我的HTML

代码语言:javascript
复制
<input type="text" ng-model="filterText" />
<table>
      <tr ng-repeat="item in data"><td>{{ item.id }}</td><td>{{ item.name }}</td>...</tr>
</table>

我的过滤逻辑:

$filter('filter')(data, {id:$scope.filterText, name:$scope.filterText})

过滤是有效的,但同样,它采用的是匹配列的交集,而不是联合。谢谢!

EN

回答 7

Stack Overflow用户

回答已采纳

发布于 2013-12-31 10:44:24

我想明白了--我必须编写自己的自定义过滤器。以下是我的解决方案:

代码语言:javascript
复制
var filteredData;

filteredData = $filter('filter')(data, function(data) {
  if ($scope.filter) {
    return data.id.toString().indexOf($scope.filter) > -1 || data.name.toString().indexOf($scope.filter) > -1;
  } else {
    return true;
  }
});
票数 3
EN

Stack Overflow用户

发布于 2013-12-31 10:40:57

创建一个自定义筛选器并不难,它允许您拥有任意多的参数。下面是一个带有一个和两个参数的筛选器示例,但您可以根据需要添加任意多个参数。

示例JS:

代码语言:javascript
复制
var app = angular.module('myApp',[]);
app.filter('myTableFilter', function(){
  // Just add arguments to your HTML separated by :
  // And add them as parameters here, for example:
  // return function(dataArray, searchTerm, argumentTwo, argumentThree) {
  return function(dataArray, searchTerm) {
      // If no array is given, exit.
      if (!dataArray) {
          return;
      }
      // If no search term exists, return the array unfiltered.
      else if (!searchTerm) {
          return dataArray;
      }
      // Otherwise, continue.
      else {
           // Convert filter text to lower case.
           var term = searchTerm.toLowerCase();
           // Return the array and filter it by looking for any occurrences of the search term in each items id or name. 
           return dataArray.filter(function(item){
              var termInId = item.id.toLowerCase().indexOf(term) > -1;
              var termInName = item.name.toLowerCase().indexOf(term) > -1;
              return termInId || termInName;
           });
      } 
  }    
});

然后在您的HTML中:

代码语言:javascript
复制
<tr ng-repeat="item in data | myTableFilter:filterText">

或者,如果您想要使用多个参数:

代码语言:javascript
复制
<tr ng-repeat="item in data | myTableFilter:filterText:argumentTwo:argumentThree">
票数 25
EN

Stack Overflow用户

发布于 2014-03-11 00:39:46

使用此命令对所有列进行搜索(可能会很慢):search.$ AngularJS API: filter

代码语言:javascript
复制
Any Column Search:
<input ng-model="search.$"> 
<table>
<tr ng-repeat="friendObj in friends | filter:search:strict">
...
票数 20
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/20849804

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档