javascript - 单击按钮时在 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?

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')">

然后在 Controller 中切换变量 sortType

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

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