Question

在我的表单中，我在所有这些列中都有一个带复选框的表。我有3个<tr>，每个<tr>都有ng-repeate调用webservice来显示克隆（Json数据）。当我点击一个复选框时，我会生成一个使用以下代码记录id的js数组：

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

我包含了要从数组中删除的else部分： 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>

选中并取消选中Angular复选框

2 个答案: