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

Question

我正在使用 Angular JS 显示来自 REST API 的输出响应 (JSON)。我计划为用户提供列出的每个结果的复选框选项以及全选/取消全选复选框。我坚持实施全选/取消全选实现，如何实现全选/取消全选复选框以及如何检索选定的复选框信息并形成所有选定 Id 的 JSON 对象。我很乐意以角度方式进行

这是我的控制器调用

   $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."
     }
   });

这是我来自 REST 的 JSON 响应

{
    "items": [{
        "customerId": "ABC",
        "type": "D"
    }, {
        "customerId": "DEF",
        "type": "A"
    }],
    "more": false
} 

这是我的 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>

我想实现全选/取消选择选项并检索选择的客户 ID 并形成一个 JSON 对象

Answer 1

在每个搜索响应项上添加一个选定的字段：

$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."
    }
});

模板：

<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>

然后全选/取消全选，可以这样写：

$scope.selectAll = function() {
    angular.forEach($scope.searchresponse, function (x) {
        x.selected = true;
    });
}

$scope.deselectAll = function() {
    angular.forEach($scope.searchresponse, function (x) {
        x.selected = false;
    });
};

并获取选择的值：

function getSelected() {
    return $scope.searchresponse.filter(function (x) {
        return x.selected;
    });
}

// alternative implementation
var getSelected = [].filter.bind(
    $scope.searchresponse, 
    function (x) { return x.selected; });