Question

我正在尝试实现用于选择表行的复选框。该表是使用ng-repeat构建的，我想包含一个文本输入来过滤表格。选中一个复选框后，该项目的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数组中，无论是移动它还是向其添加元素或重新生成表格，该项目都将保留其{ {1}}属性。但是，您遇到的问题是您无法将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来更改选中/未选中复选框时的true / false值。

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表中的复选框选项

2 个答案: