使用过滤器在 ng-repeat 表中绑定复选框选择答案

【问题标题】：Binding checkbox selections inside ng-repeat table with filter使用过滤器在 ng-repeat 表中绑定复选框选择
【发布时间】：2016-10-14 14:23:00
【问题描述】：

我正在尝试实现用于选择表格行的复选框。该表是用 ng-repeat 构建的，我想包含一个文本输入来过滤表。当一个复选框被选中时，该项目的 ID 被推送到一个数组中，并且当该框被取消选中时它被删除。我的问题是，在操作过滤器后，复选框不会保持选中状态。如何正确地将复选框绑定到我的数组？

Plunk - https://plnkr.co/edit/U0N3vDTZAULC6CFIdhVp?p=preview

HTML：

    <tr ng-repeat="name in names | filter: search">
      <td>
        <input type="checkbox" class="input-sm" ng-checked="selectedNames.indexOf(name.id) > -1" ng-click="addName(name.id)"/>
      </td>
      <td>{{name.name}}</td>
      <td>{{name.age}}</td>
    </tr>

JS：

  $scope.addName = function (id) {
    var idx = selectedNames.indexOf(id);
    if (selectedNames.indexOf(id) == -1) {
      console.log('Pushing: ', id)
      selectedNames.push(id);
      console.log(selectedNames);
    } else {
      selectedNames.splice(idx,1);
      console.log(selectedNames);
    }

【问题讨论】：

标签： javascript angularjs checkbox angularjs-ng-repeat angularjs-filter

【解决方案1】：

我稍微更改了代码，现在它可以正常工作了。这是工作的笨蛋。 https://plnkr.co/edit/8Jg9hvxibYhVV89Q0bts?p=preview

此代码已添加到控制器中：

  $scope.checkSelected= function(id){
    var idx = selectedNames.indexOf(id);
    return idx > -1;
  }

我改变了你的 ng-check 表达式：

<input type="checkbox" class="input-sm" ng-checked="checkSelected(name.id)" ng-click="addName(name.id)" />

【讨论】：

【解决方案2】：

我建议它采用您的复选框输入并使用 ng-model 将其实际绑定到模型：

<input ng-model="name.checked" type="checkbox" class="input-sm"/>

这样，当您检查项目时，无论您做什么，它都将保留在names 数组中，无论是移动它还是向其添加元素或重新生成表格，该项目都将保留其name.checked属性。但是，您将遇到的问题是您不能将 ng-checked 属性与 ng-model 一起使用，因此要解决此问题，我们需要更改您的 selectedNames 数组，以便在需要时进行计算。

假设你需要你的 selectedNames 数组：

//First, inject the $filter object into your angular controller
$scope.getSelected = function() {
    return $filter('filter')($scope.names, {checked: true}); // Or something along these lines. I'm just typing this into stack overflow so I haven't tested it.
}

现在，您不必每次选择名称时都调用脚本。当您需要选择的项目时，它将被检索。

注意：您还可以使用ng-true-value 和ng-false-value 更改复选框选中/未选中时的真/假值。

【讨论】：