angularJs filter on single column with different value based on checkbox selection
Question
I have one json dataset in angular say
$scope.data = [{
call_id: '1',
title: 'test',
start: new Date(elem.call_date),
backgroundColor: "#9f1eab",
borderColor: "#9f1eab",
filterByCheckbox: 'filterOne'},
{
call_id: '1',
title: 'test',
start: new Date(elem.call_date),
backgroundColor: "#9f1eab",
borderColor: "#9f1eab",
filterByCheckbox: 'filterTwo'
}];
Now I have 3 checkox
filterOne
filterTwo
filterThree
Now I want to filter $scope.data based on above 3 checkbox selection. Column to filter in $scope.data is filterByCheckbox
So above is my data set which contains list of records having column filterByCheckbox I want to filter data based on that column.
If first 2 checkbox checked, $scope.data should be filtered on column filterByCheckbox containing filterOne and filterTwo value.
How can i achieve this in angularjs?
I have tried:
$filter('filter')($scope.data, { filterByCheckbox: 'filterTwo' })
But it works for only one checkbox.
2 answers
solution1
1 2017-04-04 07:39:28
$scope.filterdData=[];
angular.forEach($scope.data,function (val,key){
if(($scope.filterOne && val.filterByCheckbox==='filterOne')||($scope.filterTwo && val.filterByCheckbox==='filterTwo')||($scope.filterThree && val.filterByCheckbox==='filterThree')){
$scope.filterdData.push(val);
}
});
solution2
1 2017-04-04 08:15:07
I would solve it using ngTrueValue and ngFalseValue . They are basically the value to which the expression should be set when checked and unchecked respectively.
So, your checkboxes would look like this:
<input type="checkbox" data-ng-model='search.filterOne'
data-ng-true-value="'filterOne'" data-ng-false-value='' />filterOne
Now, all we need to do is use those as filter. Like this:
<div ng-repeat="item in data | filter: search.filterOne | filter: search.filterTwo">
<pre>{{item.filterByCheckbox}}</pre>
...
</div>
Find working example below!
var app = angular.module("myApp", []); app.controller("appCtrl", function($scope) { $scope.search = [] $scope.data = [{ call_id: '1', title: 'test', start: new Date(), backgroundColor: "#9f1eab", borderColor: "#9f1eab", filterByCheckbox: 'filterOne' }, { call_id: '1', title: 'test', start: new Date(), backgroundColor: "#9f1eab", borderColor: "#9f1eab", filterByCheckbox: 'filterTwo' }]; });
<!DOCTYPE html> <html ng-app="myApp"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <body ng-controller="appCtrl"> <input type="checkbox" data-ng-model='search.filterOne' data-ng-true-value="'filterOne'" data-ng-false-value='' />filterOne <br> <input type="checkbox" ng-model="search.filterTwo" data-ng-true-value="'filterTwo'" data-ng-false-value=''/>filterTwo <div ng-repeat="item in data | filter: search.filterOne | filter: search.filterTwo"> <pre>{{item.filterByCheckbox}}</pre> </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.