使用名称过滤器 angularJS 使一个过滤器覆盖另一个过滤器答案

【问题标题】：Make one filter override the other with a name filter angularJS使用名称过滤器 angularJS 使一个过滤器覆盖另一个过滤器
【发布时间】：2015-07-15 14:48:58
【问题描述】：

我有一个在 AngularJS 中使用 ng-repeat 显示的数据数组。显示的数据经过过滤，然后根据用户输入进行分页，过滤器引用控制器中的函数。

现在我想要做的是，如果用户在搜索字段中输入文本并仅根据输入的文本进行过滤，则覆盖当前的过滤条件。 IE。如果用户输入文本，则其他过滤器不再适用，而是使用文本过滤器。我觉得我设置它的方式是在控制器的过滤器函数中创建一个 if 函数，然后通过文本 javascript 重新创建角度过滤器。但是，我不确定该怎么做，即使它是正确的方法。

下面是代码的 sn-p，希望能很好地概述当前状态和我想要实现的目标。

文本搜索 HTML

<input         
ng-model="searchData.query"
type="text" 
name="productname"
id="productname"
class="form-control productname-answer">

过滤 HTML

<div ng-repeat="product in (productsFilterd = (productData | filter: {productfilter:true} | orderBy:'relevance':true)).slice(((productData.currentPage-1)*productData.itemsPerPage), ((productData.currentPage)*productData.itemsPerPage))">
...
</div>

控制器

    $scope.getProductfilter = function() {
for (i = 0; i < $scope.productprofiles.length; i++) {
    if ($scope.productprofiles[i].reqlanguagecompara === 1 && $scope.productprofiles[i].reqservicecompara === 1) {
        $scope.productprofiles[i].productfilter = true;
    }
    else {
        $scope.productprofiles[i].productfilter = false;
    };
    };
};

【问题讨论】：

这是模板中要做的很多事情。我会在控制器中将整个 ngRepeat 设为一个函数，然后迭代该函数的结果。
感谢您的回复。这是肯定可以做到的，但这是否有助于解决最初的问题，即在某些情况下有两个过滤器，一个覆盖另一个过滤器？

标签： angularjs angularjs-ng-repeat angularjs-filter

【解决方案1】：

请查看简化的工作演示：http://jsfiddle.net/c85gq14k/6/。

尝试将逻辑包装成两个过滤器函数，一个是默认的，一个是自定义的：

angular.module('Joy', [])
    .controller('FilterCtrl', ['$scope', function ($scope) {
    $scope.defaultFilter = function (n) {
        return n > 5;
    };
    $scope.inputFilter = function (n) {
        if ($scope.number) {
            return n > $scope.number;
        }
        return $scope.defaultFilter(n);
    };
}]);

HTML 是这样的：

<div ng-app="Joy">
    <div ng-controller="FilterCtrl" id="play-ground">
        <input type="text" ng-model="number">
        <div>
            <ul>
                <li ng-repeat="i in ([1,2,3,5,8,13,21,34] | filter:inputFilter )" ng-bind="i"></li>
            </ul>
        </div>
    </div>
</div>

无论何时输入数字，都不会应用默认过滤器n>5。

【讨论】：