How to filter multiple values (OR operation) in angularJS with Checkbox
<ul ng-repeat="movie in movies |filter:Filter.Comedy | filter:Filter.Action | filter:Filter.Drama">
<li>{{movie.name}}</li>
</ul>
<label>Comedy</label><input type="checkbox" ng-model="Filter.Comedy" ng-true-value="Comedy" data-ng-false-value=''/><br/>
<label>Action</label><input type="checkbox" ng-model="Filter.Action" ng-true-value="Action" data-ng-false-value=''/><br/>
<label>Drama</label><input type="checkbox" ng-model="Filter.Drama" ng-true-value="Drama" data-ng-false-value=''/>
http://jsfiddle.net/samibel/va2bE/1/
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 the filter. Syntax: $filter("filter")(array, expression, compare, propertyKey) function myCtrl($scope, $filter) { $scope. finalResult = $filter("filter")( $scope.
A Filter in AngularJS helps to format the value of an expression to display to the user without changing the original format. For example, if you want your string in either lowercase or uppercase, you can do it using filters.
Use a filter function:
View:
<ul ng-repeat="movie in movies | filter: showMovie">
<li>{{movie.name}}</li>
</ul>
Controller:
$scope.showMovie = function(movie){
return movie.genre === $scope.Filter.Comedy ||
movie.genre === $scope.Filter.Drama ||
movie.genre === $scope.Filter.Action;
};
Fiddle
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