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

Question

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

笨拙 - 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);
    }

Answer 1

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

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

这样，当您检查项目时，无论您做什么，它都将保留在 names 数组中，无论是移动它还是向其添加元素或重新生成 table，该项目将保留其 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.
}

现在，您不必在每次 select 命名时都调用脚本。当您需要 selected 项目时，它将被检索。

注意：您还可以使用 ng-true-value 和 ng-false-value 来更改 true/false 值在选中复选框 checked/not 时等于什么。

Answer 2

我稍微修改了一下代码，现在可以正常使用了。这是工作的plunker。 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)" />

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

Binding checkbox selections inside ng-repeat table with filter

javascript

checkbox

angularjs

angularjs-ng-repeat

angularjs-filter