Angular JS全選/取消全選復選框如何檢索所選信息

Question

我正在使用Angular JS顯示REST API的輸出響應（JSON）。 我打算為用戶列出的每個結果提供一個復選框選項，以及一個selectall / deselectall復選框。我被困在實現select all / deselect all實施，如何實現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>

我想實現全選/取消選擇選項，並檢索所選的客戶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; });