how to maintain checkbox state after http call is over in angular js
how to maintain check box state when checkbox is clicked after server response comes back.
when user clicks YES checkbox,it calls trackFilter function and in turn calls http service calls but checked state is disappearing once response comes back.
when user clicks YES checkbox,it calls trackFilter function and in turn calls http service calls but checked state is disappearing once response comes back.
var xx = angular.module('xx', '');
var req = {
"search": {
"field": "xxx",
"text": "zzz"
},
"filters": []
};
xx.factory('productFactory', function($http,$q){
var defer = $q.defer();
$http.post('prodsearch',req).then(function(data){
defer.resolve(data);
});
return {
getResponse : function () {
return defer.promise;
},
searchFilter:function(val,facetname){
var query={
"facets": {
"value1": val
}
"facets1": {
"value2": val
}
};
req.filters.push(query[facetname]);
var deferred = $q.defer();
$http.post('prodsearch',req).then(function (response) {
deferred.resolve(response);
});
return deferred.promise;
}
}
}).controller('productsCtrl', function($scope, productFactory) {
$scope.productList = {};
//This will be called when the page loads
var promise= productFactory.getResponse();
promise.then(function(resp)
{
$scope.productList = resp.data;
});
//This will be called when the trackFilter called
$scope.trackFilter = function (val,name) {
var promise = productFactory.searchFilter(val,name);
promise.then(function(resp)
{
$scope.productList = resp.data;
});
};//end of trackFilter
});//end of productsCtrl
html
******
<html ng-app="xx">
<div id="leftNav" ng-controller="productsCtrl">
<div>
<div>
<h2>Filter</h2>
<ul>
<li ng-repeat="x in productList.productAggs">
<input type="checkbox" ng-click="trackFilter(x.flag,'facets')">
<span>Yes</span>
</li>
<li ng-repeat="x in productList.productAggs">
<input type="checkbox" ng-click="trackFilter(x.flag,'facets')">
<span >No</span>
</li>
</ul>
</div>
</div>
</div>
</html>
response json
******************
var json= {"productAggs": [
{
"count": 2,
"flag": true
},
{
"docCount": 0,
"flag": false
}
]
}ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.