单击按钮时在角度过滤器之间切换

Switching Between Angular Filters On Button Click

本文关键字：过滤器 之间 按钮 单击      更新时间：2023-09-26

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

角： 

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 变量来跟踪切换（见下文），但它不起作用。

角：

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？

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

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;
}
相关文章：