根据过滤后的数据更新分页

时间:2015-12-17 06:27:42

标签: angularjs

如何根据Angularjs中的过滤数据更新分页。

html代码。

 <input type="text" class="form-control" ng-model="search" placeholder="Search">


<tr ng-repeat="application in applications=application | filter:search | startFrom:(currentPage-1)*itemsPerPage |limitTo:itemsPerPage">

controller.js

$scope.$watch('search',function (term) {

                            $scope.applications = $filter('startFrom')($scope.application,term);
                            //
                            $scope.size = $scope.applications.length;
                            $scope.noOfPages = Math.ceil($scope.size / $scope.itemsPerPage);
                        $scope.currentPage = 1;


                    }, true);

过滤

module.filter('startFrom', function () {
    return function (input, start) {
        if (input) {
            start = +start;
            return input.slice(start);
        }
        return [];
    };
});

1 个答案:

答案 0 :(得分:2)

搜索功能:

  $scope.search = function () {
        $scope.filteredList = 
       filteredListService.searched($scope.allItems, $scope.searchText);

        if ($scope.searchText == '') {
            $scope.filteredList = $scope.allItems;
        }
        $scope.pagination(); 
    }

根据搜索结果计算总页数

 $scope.pagination = function () {
        $scope.ItemsByPage = filteredListService.paged( $scope.filteredList, $scope.pageSize );         
    };

    $scope.setPage = function () {
        $scope.currentPage = this.n;
    };

    $scope.firstPage = function () {
        $scope.currentPage = 0;
    };

    $scope.lastPage = function () {
        $scope.currentPage = $scope.ItemsByPage.length - 1;
    };

以下是使用过滤器分页的JSFiddle示例,以便您可以使用它并根据您的要求进行修改。