强制自定义筛选器重复工作

Question

我需要在我的循环中使用过滤器。 假设我们有带有名称的简单数组：['Thomas', 'Brian', 'Joana']。我想查看筛选的名称集。当我使用 Angular 的过滤器时，它按预期工作：

<input ng-model="filterText" />
<span ng-repeat="name in names | filter:filterText">{{name}}</span>

但是当我想使用一些自定义过滤器方法时，当"filterText"输入的值发生变化时，它不起作用：

<input ng-model="filterText" />
<span ng-repeat="name in names | filter:filterMethod">{{name}}</span>

在 js 文件中：

$scope.filterMethod = function(item) {
if ($scope.textFilter==item || $scope.textFilter==null) {
return true;
}
return false;
}

当用户更改"filterText"输入时，我想始终对名称列表强制执行过滤操作，但实际上仅当它被 Angular 预定义过滤器过滤时，此列表才会更改。完整的 plnkr 示例：PLNKR

Answer 1

像这样实现自定义过滤器

$scope.filterMethod = function(name) {
return function(item){  
if(!name ) return item;
if (name && item.startsWith(name)) {
return item;
} 
}
}

并像这样更改在 HTML 中调用过滤器

<span ng-repeat="name in result = (names | filter:filterMethod(filterText))">

angular.module("app",[])
.controller("ctrl",function($scope){
$scope.names = ['Thomas', 'Brian', 'Joana'];
$scope.filterMethod = function(name) {
return function(item){  
if(!name ) return item;

if (name && item.startsWith(name)) {
return item;
} 
}
}
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<input ng-model="filterText" />
<span ng-repeat="name in result = (names | filter:filterMethod(filterText))">
{{name}}
</span>
</div>

Answer 2

您可能需要自定义过滤器：

.filter('customFilter', function() {
return function(items, searchText) {
var filtered = [];
//logic
return filtered;
}
});
<span ng-repeat="name in names | customFilter:text">{{name}}</span>

Answer 3

将$scope.textFilter更改为$scope.filterText

$scope.filterMethod = function(item) {
if ($scope.textFilter==item || $scope.textFilter==null) {
return true;
}
return false;
}

这是你的 plunkr 的叉

子http://plnkr.co/edit/a3uSyez0VFGbZ5ZARcu7?p=preview