释

Question

当我单击顶部复选框时，如何选中网格上的所有复选框。此时它仅单击当前页面复选框。如果您可以在Plunk上模拟您的解决方案，则非常感谢。提前谢谢。

$scope.checkboxes = { 'checked': false, items: {} };

// watch for check all checkbox
$scope.$watch('checkboxes.checked', function(value) {
    angular.forEach($scope.users, function(item) {
        if (angular.isDefined(item.id)) {
            $scope.checkboxes.items[item.id] = value;
        }
    });
});

Answer 1

我现在确定你已经弄明白了，但由于这个问题没有得到解决，我正在寻找一种方法来做这件事我已经更新了你的plunker以供将来参考，如果有人偶然发现这个问题。

http://plnkr.co/edit/PjTlyX?p=preview

有两件事需要考虑，您是否希望检查所有复选框，无论是否过滤，或者检查是否需要以过滤器为中心。

如果您希望忽略对数据源的过滤，请将$ scope变量设置为未过滤的列表

var data = [{id: 1, name: "Moroni", age: 50, money: -10},
                {id: 2, name: "Tiancum", age: 43,money: 120}]
$scope.data = data;

或者如果您希望仅选择已过滤的复选框，请将orderedData设置为$ scope.tableParams方法中的另一个$ scope变量

var orderedData = params.sorting() ?
                    $filter('orderBy')(data, params.orderBy()) :
                    data;
            orderedData = params.filter() ?
                    $filter('filter')(orderedData, params.filter()) :
                    orderedData;
            $scope.orderedData = orderedData;

然后您可以通过简单地将$ scope.users更改为下面的prefer $ scope变量来自由选择您喜欢的复选框

// watch for check all checkbox
$scope.$watch('checkboxes.checked', function(value) {
    angular.forEach($scope.users, function(item) {
        if (angular.isDefined(item.id)) {
            $scope.checkboxes.items[item.id] = value;
        }
    });
});

Answer 2

这是从官方文档中执行此操作的另一种方法。

请参阅Codepen Demo here

释

您可以像

一样创建标题模板

<script type="text/ng-template" id="headerCheckbox.html">
    <input type="checkbox" ng-model="demo.checkboxes.checked" class="select-all" value="" />
</script>

并在表格中添加一列，如

<td header="'headerCheckbox.html'"><input type="checkbox" ng-model="demo.checkboxes.items[row.id]" /></td>

并观看模型demo.checkbox.checked以获取更改

$scope.$watch(function() {
      return self.checkboxes.checked;
    }, function(value) {
      angular.forEach(simpleList, function(item) {
        self.checkboxes.items[item.id] = value;
    });
});

带有复选框的ngTable不选中网格上的所有复选框

2 个答案:

释