Question

我正在使用Angular JS从REST API显示输出响应（JSON）。我打算为每个列出的结果提供一个复选框选项，也可以选择selectall / deselectall复选框。我坚持实现select all / deselect all implementation，如何实现selectall / deselect all复选框以及如何检索选中复选框信息并形成所有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>

我想实现select all / deselect选项并检索所选的客户ID并形成JSON对象

Answer 1

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

char e = (char) exampleCharInput;

模板：

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

然后选择all / de-select all，你可以写：

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

Angular JS选择all / De选中所有复选框如何检索所选信息

1 个答案: