Question

我想根据从下拉框中获取的值来过滤ngtable。

$scope.tableParams = new ngTableParams({
    page: 1,            // show first page
    count: 5,          // count per page
    sorting: {
        name: 'asc'     // initial sorting
    },
}, {
    total: tabledata.length, // length of data
    getData: function($defer, params) {
        // use build-in angular filter
         filteredData = params.filter() ?
          $filter('filter')(tabledata, params.filter()) :
             tabledata;

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

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

我在plunker上发布了我的完整代码：http://plnkr.co/edit/YbCe5Y6qIxN18yHCrzwW?p=preview。

出现的问题是页面数量保持不变，但如果我的某些结果在第5页上，它们将保留在那里。基本上我有空页面，其中包含过滤结果的页面（没有页面缩小）。

我尝试合并我的自定义过滤器 - viewFilter，但我没有成功使其工作。这是另一个使用过滤器基本（基于列名称）并且有效的示例：http://plnkr.co/edit/CbmbXTXukNxC1ZzkJNKO?p=preview

是否有人知道广告可以帮助我整合此自定义过滤器？感谢

Answer 1

您没有调用表格的过滤器，只是过滤了您所在的页面。为了解决您的问题，您应该从viewFilter函数调用ng-table的过滤函数。我对您的代码进行了一些更改，并按预期工作。在控制器中我改变了viewOptions的值，我在表中包含了一个过滤器，并且我从viewFilter中调用了过滤器函数。现在看起来像：

    $scope.viewOptions = [
        {
            name: 'All',
            value: ''
        },
        {
            name: 'Approved',
            value: 'Y'
        },
        {
            name: 'Declined',
            value: 'N'
        }
    ];

    $scope.view = { type: '' };

    $scope.viewFilter = function (data) {
        var filter = $scope.view.type;
        $scope.tableParams.filter(filter, data);

    };

    $scope.tableParams = new ngTableParams({
        page: 1,            // show first page
        count: 10,          // count per page
        sorting: {
            name: 'asc'     // initial sorting
        },
        filter:{
            flag_approved:''
        }
    }, {
        total: tabledata.length, // length of data
        getData: function ($defer, params) {
            // use build-in angular filter
            var filteredData = params.filter() ? $filter('filter')(tabledata, params.filter()) : tabledata;
            var orderedData = params.sorting() ? $filter('orderBy')(filteredData, params.orderBy()) : filteredData;
            params.total(filteredData.length);
            $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
        }
    });
});                                                                                           `

块引用

在html中我每次调用viewFilter函数时都会更改下拉列表，并且我已从表中删除了过滤器。现在它看起来像：`

页面 {{tableParams.page（）}}

每页计数： {{tableParams.count（）}}

排序： {{tableParams.sorting（）| json}}

过滤： {{tableParams.filter（）| json}}

数据： {{tableParams.ordered（）| json}}

<div class="row">
    <div class="col-xs-6 text-left">
        <form class="filter-form form-inline" role="form">
            <div class="form-group">
                <label for="drop-actions">View:</label>&nbsp;
                <select id="drop-actions" class="form-control" ng-model="view.type" ng-options="opt.value as opt.name for opt in viewOptions" ng-change="viewFilter()">
                </select>
            </div>
        </form>
    </div>
</div>

<table class="table table-bordered" ng-table="tableParams">
    <tr ng-repeat="g in $data">
        <td data-title="'Name'" sortable="'name'">
            {{ g.name }}
        </td>
        <td data-title="'Head2'">
            {{ g.flag_approved }}
        </td>
    </tr>
</table>

Answer 2

要解决问题更改$scope.view.type = '';，请改为$scope.view = { type: '' };

如何在自定义适配器上过滤和刷新ngtable分页

2 个答案: