Switching Between Angular Filters On Button Click

Question

I have written a few different custom filters in my angular module to achieve the sorting that I want, e.g.

Angular:

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

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

In my HTML (jade), I can call the different filters as such:

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

OR

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

I wish now to add a button that toggles between the two different sorting options.

I tried to do this by defining a new overall filter function that makes use of a $scope variable to keep track of the toggle (see below), but it isn't working.

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();
    }
}

I have also tried passing in the $scope variable to the filter in the HTML itself, e.g. sortFunction:byValue but it also doesn't work.

Can anyone help? Thank you!

Demo plunker @ plnkr.co/edit/altzOow7aIQhqKTN93Oe?p=preview?

charlietfl · Accepted Answer · 2016-03-02 01:05:38Z

1

Can use one custom filter function and an argument

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

Then in controller switch around variable sortType

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

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

edited Mar 2, 2016 at 1:05

answered Mar 2, 2016 at 0:56

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Tacocat Over a year ago

You've got crazy rep, @charlietfl. Thanks! Will take a look!

Tacocat Over a year ago

For some unknown reason I cannot fathom, this isn't working for me either, :(

Tacocat Over a year ago

Ideally, however, I would prefer to keep my custom filters separate, since some lists will not be using all of the filters.

charlietfl Over a year ago

Fair enough..can also set a default in filter if that helps

charlietfl Over a year ago

using getSortFunction filter and $filter

|

Collectives™ on Stack Overflow

Switching Between Angular Filters On Button Click

1 Answer 1

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related