Question

我在角度模块中编写了一些不同的自定义滤镜，以实现我想要的排序，例如

角：

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

OR

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

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

我尝试通过定义一个新的整体过滤功能来实现这一点，该功能利用$scope变量来跟踪切换（见下文），但它不起作用。

角：

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但它也不起作用。

有人可以帮忙吗？谢谢！

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

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

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

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

按钮上的角度过滤器之间切换单击

1 个答案: