使用ng-repeat按多列过滤
使用ng-repeat按多列过滤
提问于 2013-12-31 08:21:54
我想知道在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
<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})
过滤是有效的，但同样，它采用的是匹配列的交集，而不是联合。谢谢!
回答 7
Stack Overflow用户
回答已采纳
发布于 2013-12-31 10:44:24
我想明白了--我必须编写自己的自定义过滤器。以下是我的解决方案：
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;
}
});Stack Overflow用户
发布于 2013-12-31 10:40:57
创建一个自定义筛选器并不难，它允许您拥有任意多的参数。下面是一个带有一个和两个参数的筛选器示例，但您可以根据需要添加任意多个参数。
示例JS：
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中：
<tr ng-repeat="item in data | myTableFilter:filterText">或者，如果您想要使用多个参数：
<tr ng-repeat="item in data | myTableFilter:filterText:argumentTwo:argumentThree">Stack Overflow用户
发布于 2014-03-11 00:39:46
使用此命令对所有列进行搜索(可能会很慢)：search.$ AngularJS API: filter
Any Column Search:
<input ng-model="search.$">
<table>
<tr ng-repeat="friendObj in friends | filter:search:strict">
...页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20849804
复制相关文章
相似问题
腾讯云开发者
