Angular JS server side data filter with multiple checkboxes

Question

How do i create server side filtering in angular using multiple checkboxes and when i click on apply filters the data should get filtered based on input fields checked and clicking clear filters should be removed and all data should be displayed. Here is json

{
	items:[
	{itemName:"apple",itemCategory:"fruits",itemStatus:"available",shipping:"nonshippable"},
	{itemName:"mobile",itemCategory:"electronics",itemStatus:"notavailable",shipping:"shippable"},
	{itemName:"camera",itemCategory:"gadgets",itemStatus:"available",shipping:"shippable"},
	{itemName:"laptop",itemCategory:"computers",itemStatus:"notavailable",shipping:"shippable"},
	{itemName:"jeans",itemCategory:"clothes",itemStatus:"available",shipping:"shippable"},
	{itemName:"nike",itemCategory:"shoes",itemStatus:"available",shipping:"shippable"},
	],
	filters:[
	{label:"apple"},
	{label:"laptop"},
	{label:"jeans"},
	{label:"nike"},
	{label:"camera"}
	]
}

As you see my filter json and items both are in same json file.

I think its best to sort this data at client side, and if you want to sort it from server create an API and pass filters to it and display filtered data — Basilin Joe
– Basilin Joe, Commented Jan 13, 2016 at 9:07
how do i pass checked input fields values to in request, i already have api. — sampathsuny
– sampathsuny, Commented Jan 13, 2016 at 9:12

Mahantesh Kumbar · Accepted Answer · 2016-01-14 10:21:55Z

0

try this

<div ng-repeat="filter in filters">
    <label>{{filter.label}}</label>        
    <input type="checkbox" ng-model="filterCriteria" value="{{filter}}" ng-click="someFunc(filter)">
</div>

Controller

$scope.someFunc = function(filter){
//do the logic
var arr = [];
var idx = arr.indexOf(report);
if(idx>-1){
arr.splice(idx,1);//unchecked values remove from arr
}else{
arr.push(filter);
}
console.log(arr);//if checked values added into arr

}

edited Jan 14, 2016 at 10:21

answered Jan 13, 2016 at 9:23

Mahantesh Kumbar

2551 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

sampathsuny Over a year ago

yes i have done in same way but once i click apply filter the data filtered but after that if i uncheck input the data is changing. I want to change only on apply filter click

Collectives™ on Stack Overflow

Angular JS server side data filter with multiple checkboxes

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related