Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to filter data based on two custom filters in Angular js

I have two custom filters, I want to filter my data using both these custom filters. But i faced the problem, If I used one by one then they work good, But when I try to use both filters at the same time then no output. My code is as follow:

<script>
     var myApp = angular.module('myApp', []);
     myApp
.filter('selectedTags', function() {
    return function(postdata, tags) {
        return postdata.filter(function(task) {

            for (var i in task.tarn_list) {
                if (tags.indexOf(task.tarn_list[i]) != -1) {
                    return true;
                }
            }
            return false;

        });
    };
})
.filter('selectedDep', function() {
    return function(postdata, tags) {
        return postdata.filter(function(task) {

            for (var i in task.deployment) {
                if (tags.indexOf(task.deployment[i]) != -1) {
                    return true;
                }
            }
            return false;

        });
    };
})
.controller('PostList', ['$scope', '$http', function($scope, $http) {
           var jsonFile='../../json.php';
           $http.get(jsonFile).success(function(data) {
            $scope.postdata = data;
           });
           $scope.useMakes=[]
           $scope.checkBoxModel={
                    search:[],
                    ddsearch:[]
                };
           $scope.totalFeatures=features;
           $scope.deployment=all_deployment;
        }]);
</script>

My div is as follow on which I want to apply filter:

<div ng-repeat="record in postdata | selectedDep:checkBoxModel.ddsearch | selectedTags:checkBoxModel.search" >
like image 331
Tarnjeet Singh Avatar asked Dec 18 '15 12:12

Tarnjeet Singh


People also ask

Is the correct way to apply multiple filters in AngularJS?

Answer: A is the correct option. The syntax of applying multiple filters in AngularJS can be written as: {{ expression | filter1 | filter2 | ... }}

What is the correct way to apply filter in AngularJS?

In AngularJS, you can also inject the $filter service within the controller and can use it with the following syntax for filter. Syntax: $filter("filter")(array, expression, compare, propertyKey) function myCtrl($scope, $filter) { $scope. finalResult = $filter("filter")( $scope.

Which character is used to chain multiple filters in AngularJS?

The pipe symbol ( | ) is used to chain multiple filters together.

How do I create a filter in AngularJS?

Steps to Create a Custom Filter Create an AngularJS application. Use (dot) .filter API provide by AngularJS framework to add. Pass a filter name and filter function to custom. Write logic for transforming the input to output in return.

What is a demofilter in AngularJS?

The ‘Demofilter’ is a name given to our filter. This is the standard way in which custom filters in AngularJS are defined wherein a function is returned. This function is what contains the custom code to create the custom filter.

How to use lowercase filter in AngularJS?

Lowercase Filter in AngularJS uses to convert the string into a lowercase string. If a lowercase filter is used then the string that is taken as an input in any format is formatted and gets displayed to the user in the lowercase format as an output. AngularJS Lowercase Filter:

Why is it discouraged to write stateful filters in AngularJS?

It is discouraged to write stateful filters because angularJS cannot optimize its execution. Rather than writing a stateful filter, you can mark a filter as stateful. By marking a filter as stateful, during each digest cycle filter can execute one or more time.


1 Answers

Not having seen the actual dataset, this here should float the boat I reckon - given the properties you've exposed in your question and the nature of the loops;

https://jsfiddle.net/op7m14m1/1/


Instead of for in loops, I've opted for nested filters (which is in essence what you're doing).

var predicate = [];

dataset.filter(function (a) {
  var inner = a.inner.filter(function (b) {
    return predicate.indexOf(b) > -1;
  });

  return inner.length > 0; 
});

Looking at the two filters you have, you could break it down into a single function with a bound (or passed in) parameter dictating which property to use as a matcher for the filter(s).

Something like this;

function generic () {
  return function (prop, dataset, predicate) {
    return dataset.filter(function (element) {

      var innards = element[prop].filter(function (iEl) {
        return predicate.indexOf(iEl) > -1;
      });

      return innards.length > 0;
    });
  }
}

And then to use it you could do the following;

 module.filter('genericFilter', generic);
 module.filter('selectedDep',   generic.bind(null, 'deployment');
 module.filter('selectedTags',  generic.bind(null, 'tarn_list');

 // $filter('genericFilter')('deployment', [], ['a']);
 // $filter('selectedDep')([], ['b']);
 // $filter('selectedTags')([], ['c']);

This setup allows for a single function, that you can reuse to your heart's content - simply pass in the property you would like to do a deep filter of, or bind it preemptively.

like image 60
Kasper Lewau Avatar answered Nov 15 '22 16:11

Kasper Lewau