使用Angular選中和取消選中復選框

Question

在我的表單中，所有這些列中都有一個帶有復選框的表。 我有3個<tr> ，每個<tr>都有其ng-repeate調用Web服務以顯示克隆（Json數據）。 當我單擊一個復選框時，我生成一個js數組，該數組使用以下代碼記錄id：

checkoptions (array, model) {
angular.forEach(array, (value, key) => {
  if (array[key].checked) {
    model.push(array[key].id)
  }
})

在HTML中：

<tr ng-repeat="developer in $ctrl.developers">
    <td>{{developer.label}}</td>
    <td>
      <input type="checkbox" id="{{developer.id}}"
          ng-change="$ctrl.checkoptions($ctrl.developers,$ctrl.employees.developers)" 
             ng-model="developer.checked">
                <label for="{{developer.id}}"></label>
     </td>

它有效，但是問題是當我取消選中復選框時，它不會從js數組中刪除

Answer 1

我包括要從陣列中刪除的其他部分： http : //jsfiddle.net/x9m1nqvp/1/

      $scope.checkoptions = function (array, model) {
        angular.forEach(array, (value, key) => {
          if (array[key].checked) {
            var index = model.indexOf(array[key].id);
            if(index == -1)
                model.push(array[key].id)
          }
          else {
            var index = model.indexOf(array[key].id);
            if(index >=0)
                model.splice(index, 1);
          }
      })

Answer 2

雖然埃弗頓的答案可以完成工作，但是每次單個復選框更改狀態時，檢查陣列中的每個項目都是多余的。 您實際上不必為數組中的每個項目都進行更新。

這是一個示例，其中僅將實際切換的復選框添加到employees.developers數組中或從其中刪除（ 注意：不需要多余的angular.forEach ）：

$scope.checkoption = function (developer){
    if (developer.checked) {
        var index = $scope.employees.developers.indexOf(developer.id);
        if(index == -1)
            $scope.employees.developers.push(developer.id)
    } else {
        var index = $scope.employees.developers.indexOf(developer.id);
        if(index >=0)
            $scope.employees.developers.splice(index, 1);
    }
}

以及如何在html中使用它：

<tr ng-repeat="developer in developers">
    <td>{{developer.label}}</td>
    <td>
        <input type="checkbox" id="{{developer.id}}"
            ng-change="checkoption(developer)" 
            ng-model="developer.checked">
        <label for="{{developer.id}}"></label>
    </td>
</tr>