angularjs - ngTable 选择所有过滤后的数据

Question

我正在尝试仅从具有过滤数据的 ng-table 中选择行。使用以下代码过滤表格行，但即使未显示的行也会被选中:

Controller :

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>

当通过名称或性别过滤表格时，表格会重新呈现过滤后的数据。当您在过滤表时单击全选复选框时，将选择过滤的行。不幸的是，当您清除过滤器时，先前过滤掉的行也会被选中。选择所有过滤的行然后触发应该获取所选项目的操作时也是如此。 (为操作选择所有 ID。)

我怎样才能只选择过滤后的行？谢谢。

Answer 1

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

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));
});

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