Angular JS全选/取消全选复选框如何检索所选信息

Question

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

Answer 1

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; });