Html 角度数据表-仅选择筛选的行

我以角度的方式呈现数据表，每行添加一个复选框，并在顶部添加一个全选复选框。问题是，例如，如果我选中“全选”复选框，我将使用搜索框筛选行，它将选中所有行。我该怎么做才能在单击“全选”复选框时只检查过滤后可见的行

Html

控制键

---

解决此问题的方法有很多： 1您可以为“全选”复选框编写更改功能。在该函数中，首先应该过滤所有数据，然后检查它们。 2您可以将主数据复制到另一个变量，我们现在称之为x。之后，在表中显示x不是您的主要资源。当您要使用搜索框筛选行时，请过滤主数据，并将其传递到x变量中。当您要使用x变量进行检查或添加等操作时，请使用x变量。您必须浏览DataTables API。DT从一个阴影表中移除并注入DOM节点，所以在下一次重画之前，仅仅操纵DOM显然不会产生真正的效果。幸运的是，您已经实现了一个DTE实例

从1.10.6开始，遍历行、列或单元格最方便的方法是every方法。请参见此链接KR->

此处复选框位于第0列；代码可以翻译成

循环浏览所有行 获取第一列 转换为jQuery实例 找到 更新选中状态 有关selectAll复选框的一些注意事项：

最好使用对象作为ng模型，在示例中我使用了settings.selectAll literal ng click不能有效地使用复选框，如果确实要使用指令，请仅使用ng change 因为您使用的是ng模型，所以只需$watch即可查看该值，调用mainCtrl.toggleAllmainCtrl.selectAll是不明确的

---

我看到您的plunker，我在搜索框中搜索了“Accountant”，它返回了两个结果，然后当我单击checkAll复选框时，它选中了所有项目，而不仅仅是筛选的项目。@klent，好的，没有想到这一点：只需添加{search:applied}作为行选择器，然后它将只迭代筛选的行。见上文。也更新了plunkr。谢谢。我的下一个问题是，即使复选框被选中，复选框的模型仍然为false。@klent，OK，已经分叉了plunkr->复选框引用ng模型的地方，选中。只需$scope.data[this.index].checked=$scope.settings.selectAll就可以从循环中注释掉内部更新。在控制台中查看选中的属性是如何更改的。@UmairRazzaq，我很确定您可以通过api来执行此操作。行{search:'applicated'，page:'current'}。每。。。

<table id="tblAvailable" datatable="ng" dt-options="mainCtrl.dtOptions" dt-instance="mainCtrl.dtInstance" dt-column-defs="mainCtrl.dtColumnDefs" class="table table-responsive table-hover">
    <thead>
        <tr>
            <th>Ref. #</th>
            <th>Type</th>
            <th>Category</th>
            <th>Applied Amount</th>
            <th>New Amount</th>
            <th><input type="checkbox" ng-model="mainCtrl.selectAll" ng-click="mainCtrl.toggleAll(mainCtrl.selectAll)" ng-change="mainCtrl.update()"></th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="Item in mainCtrl.newLineDetails" ng-if="Item.Amount > 0">
            <td>{{Item.Id}}</td>
            <td>{{Item.Type.Name}}</td>
            <td>{{Item.Category.Name}}</td>
            <td>{{Item.Amount | number:2}}</td>
            <td><input type="number" ng-disabled="Item.isSelected == false" id="Amount" name="Amount" class="form-control ng-pristine ng-untouched ng-valid ng-not-empty" ng-model="Item.Amount" ng-min="1" ng-max="Item.Amount" ng-required="Item.isSelected == true" ng-change="mainCtrl.updateForFreeUps()"/></td>
            <td><input type="checkbox" ng-model="Item.isSelected" ng-change="mainCtrl.toggleOne(Item.Id)"></td>
        </tr>
    </tbody>
</table>

self.toggleAll = function(selectAll) {
    angular.forEach(self.newLineDetails, function (value, index) {
        self.newLineDetails[index]["isSelected"] = selectAll;
        if (selectAll == false) {
            self.newLineDetails[index]["Amount"] = null;
        }
    })

}
self.toggleOne = function (Id) {
    for (var i = 0, len = self.newLineDetails.length; i < len; i++) {
        if (self.newLineDetails[i]["Id"] == Id) {
            self.newLineDetails[i]["Amount"] = null;
            self.selectAll = false;
            self.update();
            return;
        }
    }
    self.selectAll = true;
}

$scope.$watch('settings.selectAll', function(newVal, oldVal) {
  if (newVal == oldVal) return
  var api = $scope.dtInstance.DataTable;
  api.rows({ search:'applied' }).every(function() {
    api.cell({ row:this.index(), column:0 })
     .nodes()
     .to$()
     .find('input')
     .prop('checked', $scope.settings.selectAll);
  })
  $scope.dtInstance.DataTable.draw()
})