I am displaying output response(JSON) from REST API using Angular JS. I am planning to provide user with an option of checkbox for every result listed and also a selectall/deselectall checkbox .I am stuck at implementing select all/deselect all implementation , how to implement selectall/deselect all checkbox and also how to retrieve the selected checkbox information and form a JSON object of all the Id selected .I would love to do it the angular way
This is my Controller call
$http.post('http://localhost:8080/services/search/'+id+"", searchCriteria).then(function(response) {
$scope.searchresponse = response.data.items;
if($scope.searchresponse.length != 0){
console.log($scope.searchresponse);
}
else {
$scope.showerror = true;
$scope.ErrorMsg ="There is no record matching your criteria."
}
});
This is my JSON Response from REST
{
"items": [{
"customerId": "ABC",
"type": "D"
}, {
"customerId": "DEF",
"type": "A"
}],
"more": false
}
This is my HTML
<tr ng-repeat="details in successresponse">
<td align="left" class="validationMsg">
<input type="checkbox" name="entireday" id="entireday">
{{details.customerId}}
{{details.type}}
</td>
</tr>
I would like to implement select all / deselect option and retrieve the customer ids selected and form a JSON object
Add a selected field on each of the search response items:
$http.post('http://localhost:8080/services/search/'+id+"", searchCriteria).then(function(response) {
if (response.data && response.data.items.length != 0) {
$scope.searchresponse = response.data.items.map(function (x) {
x.selected = false;
return x;
});
console.log($scope.searchresponse);
}
else {
$scope.showerror = true;
$scope.ErrorMsg ="There is no record matching your criteria."
}
});
Template:
<tr ng-repeat="details in successresponse">
<td align="left" class="validationMsg">
<input type="checkbox" name="entireday" id="entireday"
ng-model="details.selected">
{{details.customerId}}
{{details.type}}
</td>
</tr>
then to select all/ de-select all, you can write:
$scope.selectAll = function() {
angular.forEach($scope.searchresponse, function (x) {
x.selected = true;
});
}
$scope.deselectAll = function() {
angular.forEach($scope.searchresponse, function (x) {
x.selected = false;
});
};
And to get the values that were selected:
function getSelected() {
return $scope.searchresponse.filter(function (x) {
return x.selected;
});
}
// alternative implementation
var getSelected = [].filter.bind(
$scope.searchresponse,
function (x) { return x.selected; });
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.