频道导航

angularjs – ngTable with Checkboxes不选中网格上的所有复选框

2020-02-22 Angularjs 前端之家

前端之家收集整理的这篇文章主要介绍了angularjs – ngTable with Checkboxes不选中网格上的所有复选框，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

@H_301_0@ 单击顶部复选框时,如何选中网格上的所有复选框.此时它仅单击当前页面复选框.如果您可以在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;
        }
    });
});

我相信你现在已经想到了这一点,但由于这个问题没有得到解决,我正在寻找一种方法来做这件事我已经更新了你的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(item) {
        if (angular.isDefined(item.id)) {
            $scope.checkBoxes.items[item.id] = value;
        }
    });
});