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