Question

我是Angular的新手，所以对我很轻松。

我的问题类似于this one。我做了一些不同的事情，所以接受的答案对我不起作用。

我使用Angular UI Bootstrap的Pagination指令对数据集进行分页，并且我使用Angular过滤器来允许用户过滤任何列的数据。

问题在于，当数据被过滤时，用户只能看到他当前所在页面上的数据。

$scope.applyFilter = function() {
    var begin = (($scope.currentPage - 1) * $scope.itemsPerPage);
    var end = begin + $scope.itemsPerPage;
    $scope.totalItems = $filter('filter')($scope.items).length;
    $scope.filteredItems = $filter('filter')($scope.items).slice(begin, end);
};

Here's the full Plunker

例如，如果您键入＆＃34; GA＆＃34;在状态过滤器（单词＆＃34; State＆＃34;下的文本框）中，不返回任何数据。但是，您可以选择第4页并查看符合条件的一条记录。

我希望发生的是分页自动调整，只显示一页结果，并向用户显示正确的记录。

我知道还有其他网格指令已经具备此功能，但我不想完全放弃我当前的方法。

Answer 1

您忘记了过滤器调用中的参数

public void showDatePickerDialog() {
        DatePickerFragment newFragment = new DatePickerFragment();
        newFragment.setDateDialogFragmentListener(new DatePickerFragment.DateDialogFragmentListener(){

            @Override
            public void onDateSelected(int year, int month, int dayOfMonth) {
                timeTextView.setText(year + "/" + month + "/" + dayOfMonth);
            }
        });

         newFragment.show(activity.getSupportFragmentManager(), "datePicker");
    }

Answer 2

我建议您编写自定义分页过滤器

app.filter('paginate', function() {
    return function(items, currentPage, itemsPerPage) {
        if (!Array.isArray(items)) {
            return items;
        }

        var sliceStart = (currentPage - 1) * itemsPerPage;

        return items.slice(sliceStart, sliceStart + itemsPerPage);
    };
});

将过滤逻辑移至控制器

$scope.applyFilter = function() {
    var begin = (($scope.currentPage - 1) * $scope.itemsPerPage);
    var end = begin + $scope.itemsPerPage;

    $scope.filteredItems = $filter('filter')($scope.items, $scope.search);
    $scope.filteredItems = $filter('orderBy')($scope.filteredItems, $scope.propertyName, $scope.reverse);
};

最后在两个地方更新HTML。这里

<tr ng-repeat="item in filteredItems | paginate : currentPage : itemsPerPage">

在这里

<ul uib-pagination total-items="filteredItems.length" ng-model="currentPage" class="pagination-sm" boundary-links="true" force-ellipses="true" items-per-page="5" ></ul>

Your updated example

Answer 3

您可以在ng-repeat中使用limitTo过滤器进行分页。

e.g。

<tr ng-repeat="item in items | filter:search:strict | orderBy:propertyName:reverse | limitTo:5:(currentPage-1)*5" >

棘手的部分是更新过滤器更改时要在分页窗口小部件中显示的页数。您可以通过在应用limitTo过滤器之前将过滤后的项目分配给变量来执行此操作。 e.g。

<tr ng-repeat="item in filteredItems = (items | filter:search:strict | orderBy:propertyName:reverse) | limitTo:5:(currentPage-1)*5" >

<ul uib-pagination total-items="filteredItems.length" ...></ul>

使用这种方法，您无需在控制器中$watch进行任何操作或进行任何过滤。

工作plunkr：http://plnkr.co/edit/8NinIYdRsXDVLCPz5VJN?p=preview

角度 - 过滤时调整分页

3 个答案: