How to chain AngularJS filters in controller

Question

I have few filters in view

In my proje

Answer 1

In addition to explicitly applying filters to the result of the previous one you could also build an object that will chain multiple filters together.

Controller

angular.module('Demo', []);

angular.module('Demo')
    .controller('DemoCtrl', function($scope, $filter) {

        $scope.order = 'calories';
        $scope.filteredFruits = $scope.fruits = [{ name: 'Apple', calories: 80 }, { name: 'Grapes', calories: 100 }, { name: 'Lemon', calories: 25 }, { name: 'Lime', calories: 20 }, { name: 'Peach', calories: 85 }, { name: 'Orange',    calories: 75 }, { name: 'Strawberry', calories: 65 }];

        $scope.filterFruits = function(){
            var chain = new filterChain($scope.fruits);
            $scope.filteredFruits = chain
                .applyFilter('filter', [{ name: $scope.filter }])
                .applyFilter('orderBy', [ $scope.order ])
                .value;
        };

        function filterChain(value) {
            this.value = value;
        }

        filterChain.prototype.applyFilter = function(filterName, args) {
            args.unshift(this.value);
            this.value = $filter(filterName).apply(undefined, args)
            return this;
        };
    });

View

  
    
    
    
  
  


  
  
    name
    calories
  
  

    Name: {{fruit.name}}
    Calories: {{fruit.calories}}