ngTable select 所有过滤后的数据

Question

我正在尝试 select 仅来自 ng-table 的具有过滤数据的行。使用以下代码过滤 table 行，但即使未显示的行也被 selected:

控制器：

let sampleData = [{id: 1, name: 'John Doe', gender: 'Male'},
    {id: 2, name: 'Jane Doe', gender: 'Female'},
    {id: 3, name: 'Mary Jane', gender: 'Female'},
    {id: 4, name: 'Mary Poppins', gender: 'Female'}];

$scope.tableParams = new NgTableParams({

}, {
    dataset: sampleData
});

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

$scope.$watch(() => {
    return $scope.checkboxes.checked;
}, (value) => {
    sampleData.map((item) => {
        $scope.checkboxes.items.id = value;
    });
});

$scope.$watch(() => {
    return $scope.checkboxes.items;
}, () => {
    let checked = 0;
    let unchecked = 0;
    let total = sampleData.length;

    sampleData.map((item) => {
        if ($scope.checkboxes.items.id) {
            checked++;
        } else {
            unchecked++;
        }
    });

    if (unchecked === 0 || checked === 0) {
        $scope.checkboxes.checked = checked === total;
    }

    angular.element($element[0].getElementsByClassName('select-all')).prop('indeterminate', (checked != 0 && unchecked != 0));
});

html:

<script type="text/ng-template" id="checkbox.html">
    <input type="checkbox" ng-model="checkboxes.checked" class="select-all" value="">
</script>
<table class="table" ng-table="tableParams" show-filter="true">
    <tr ng-repeat="item in $data track by $index">
        <td header="'checkbox.html'">
            <input type="checkbox" ng-model="checkboxes.items[item.id]">
        </td>
        <td data-title="'Name'" filter="{'name': 'text'}">
            {{item.name}}
        </td>
        <td data-title="'Gender'" filter="{'gender': 'text'}">
            {{item.gender}}
        </td>
    </tr>
</table>

当 table 通过名称或性别过滤时，table 会使用过滤后的数据重新呈现。当您在筛选 table 的同时单击 select 全部复选框时，筛选的行将被 selected。不幸的是，当您清除过滤器时，之前过滤掉的行也会被 selected。当 selecting 所有筛选的行然后触发应该获取 selected 项目的操作时，情况也是如此。（所有 ID 都为该操作 select 编辑。）

我怎样才能只 select 筛选的行？谢谢。

Answer 1

好的，我让它工作了。我刚刚向 $scope 添加了一个 tableData 对象，因此我可以将过滤后的数据存储在那里。这就是我用来检查 selected 项目的内容。

let sampleData = [{id: 1, name: 'John Doe', gender: 'Male'},
    {id: 2, name: 'Jane Doe', gender: 'Female'},
    {id: 3, name: 'Mary Jane', gender: 'Female'},
    {id: 4, name: 'Mary Poppins', gender: 'Female'}];

$scope.tableData = {
    filteredData: [],
    checkboxes: {
        checked: false,
        items: {}
    }
};

$scope.tableParams = new NgTableParams({
    page: 1,
    count: 10
}, {
    total: data.length;
    getData: ($defer, params) => {
        let filter = params.filter();
        let count = params.count();
        let page = params.page();
        let filteredData = filter ? $filter('filter')(data, filter) : data;

        params.total(filteredData.length);
        $scope.tableData.filteredData = filteredData;

        $defer.resolve(filteredData.slice((page - 1) * count, page * count));
    }
});

$scope.$watch(() => {
    return $scope.tableData.checkboxes.checked;
}, (value) => {
    $scope.tableData.filteredData.map((item) => {
        $scope.tableData.checkboxes.items[item].id = value;
    });
});

$scope.$watch(() => {
    return $scope.tableData.checkboxes.items;
}, () => {
    let checked = 0;
    let unchecked = 0;
    let data = $scope.tableData.filteredData;
    let total = data.length;
    let checkboxes = $scope.tableData.checkboxes;

    data.map((item) => {
        if (checkboxes.items[item].id) {
            checked++;
        } else {
            unchecked++;
        }
    });

    if (unchecked === 0 || checked === 0) {
        checkboxes.checked = checked === total;
    }

    angular.element($element[0].getElementsByClassName('select-all')).prop('indeterminate', (checked != 0 && unchecked != 0));
});

不太确定这是否是最好的解决方法。此外，当您过滤 > select 全部 > 清除过滤器时，这不会将 select 所有复选框的状态更改为 indeterminate。

Answer 2

在你的第二个手表中，更改为 return $scope.tableData.filteredData；可能会解决你的问题

ngTable select 所有过滤后的数据

ngTable select all filtered data

selectall

filter

angularjs

ngtable