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" >
Answer: A is the correct option. The syntax of applying multiple filters in AngularJS can be written as: {{ expression | filter1 | filter2 | ... }}
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.
The pipe symbol ( | ) is used to chain multiple filters together.
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.
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.
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:
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With