点击按钮切换Angular过滤器

Question

我在我的Angular模块中编写了几个自定义过滤器来实现我想要的排序，例如：

Angular:

var sortByValue = function() {
    return function(input) {
       /*...*/
       return some_boolean;
    }
};

var sortByCount = function() {
    return function(input) {
       /*...*/
       return some_boolean;
    }
};

在我的HTML（jade）中，我可以这样调用不同的过滤器：

.row(ng-repeat='item in array | sortByValue')

或者

.row(ng-repeat='item in array | sortByOrder')

我希望现在添加一个按钮，可以在两种不同的排序选项之间切换。

---

我尝试通过定义一个新的总体筛选函数来做到这一点，该函数利用了$scope变量来跟踪切换状态（见下文），但它没有起作用。

Angular:

var myController = function($scope) {
    // function called on ng-init
    $scope.initialize = function() {
        $scope.byValue = true;
    }
};

var sortFunction = function() {
    if($scope.byValue) {
        return sortByValue();
    } else {
        return sortByCount();
    }
}

我也尝试将$scope变量传递到HTML中的过滤器中，例如sortFunction:byValue，但它也不起作用。有人可以帮忙吗？谢谢！

---

这是一个演示 plunker @ plnkr.co/edit/altzOow7aIQhqKTN93Oe?p=preview?。

- Tacocat

Answer 1

可以使用一个自定义过滤函数和一个参数。

app.filter('mySorter', function(){
    return function(items, sortType){
        // sort logic
        if(!items) return;
        return items.sort(function(a, b){
            if(sortType=== 'order'){
               // order matching
             }else{
               // value matching
             }
        });
    }

});

HTML

.row(ng-repeat='item in array | mySorter: sortType')

<button ng-click="toggleSort('order')">

然后在控制器中切换变量sortType

$scope.sortType = 'order' // or 'value'

$scope.toggleSort = function(type){
    $scope.sortType = type;
}

- charlietfl

---

由于某些我无法理解的未知原因，这对我也不起作用，:( - Tacocat

理想情况下，我更愿意将我的自定义过滤器保持独立，因为有些列表不会使用所有的过滤器。 - Tacocat

好的，如果有帮助的话，也可以在过滤器中设置默认值。 - charlietfl

使用 getSortFunction filter 和 $filter。 - charlietfl

$filter 可以让你访问任何 Angular 过滤器...无论是内置的还是自定义的。因此，只需使用它来调用其中之一即可。 - charlietfl