使用带分页的 Angular 过滤器

Question

我正在对 ng-repeat 中的项目数组使用过滤器，如下所示：

<input type="text" ng-model="filterText">

<li ng-repeat="item in displayItems | filter : {item_name: filterText}>

这工作正常并过滤项目 perfectly.The 出现问题是因为我将 displayItems 与 uib-pagination 元素一起使用。分页使用 totalItems 而不是 displayItems。

<uib-pagination class="pagination-sm pagination"
    total-items="totalItems.length" ng-model="page" ng-change="changeItems()">
</uib-pagination>

显然我需要以某种方式在总项目上应用过滤器，然后创建显示项目，并将过滤后的项目放入 uib-pagination。

即。当此人键入时，在控制器中将过滤器应用于 totalItems，然后我创建分页所需的 filteredItems。然后，我还从 filteredItems 创建了 displayItems。我如何将它放入控制器而不是用于 ng-repeat 的 HTML？

我不知道该怎么做。有什么想法吗？非常感谢所有帮助....

我已经包括了一个 plunker 来展示它（不是）在它所有的荣耀中工作...... https://plnkr.co/edit/EYX6zO1795sD9TYq2J8U?p=preview

Answer 1

您可以在 ng-repeat 表达式

中使用 as alias 访问过滤后的数组

<li ng-repeat="item in displayItems | filter : {item_name: filterText} as filteredArray">

然后在分页

中使用 total-items 的别名

<uib-pagination class="pagination-sm pagination"
    total-items="filteredArray.length" ng-model="page" ng-change="changeItems()">
</uib-pagination>

Answer 2

请更改此类型但是如果您只搜索一个与搜索特定原因相关的字段。如果你有更多的领域那么你就不需要了。这是你的代码，我希望它能正常工作。

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <script src="https://code.angularjs.org/1.4.8/angular.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.0.3.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="myModule" ng-controller="myController">

    <input type="text" class="form-control advertise-filter-input sharp-corners"
      placeholder="Filter..." ng-model="filterText">

    <ul>

          <li ng-repeat="item in filterData = (displayItems | filter :  filterText)">
              <div>{{item.itemName}}</div>
      </li>

    </ul>

    <uib-pagination class="pagination-sm pagination" total-items="filterData.length" ng-model="page"
            ng-change="pageChanged()" previous-text="&lsaquo;" next-text="&rsaquo;" items-per-page=3></uib-pagination>

  </body>

</html>

Answer 3

试试，

HTML,

<li ng-repeat="item in filterData = (totalItems | filter : {itemName: filterText}) | limitTo:3:3*(page-1)">

和

<uib-pagination class="pagination-sm pagination" total-items="filterData.length" ng-model="page"
        ng-change="pageChanged()" previous-text="&lsaquo;" next-text="&rsaquo;" items-per-page=3></uib-pagination>

JavaScript,

$scope.pageChanged = function() {
  //var startPos = ($scope.page - 1) * 3;
  //$scope.displayItems = $scope.totalItems.slice(startPos, startPos + 3);
};

https://plnkr.co/edit/m3jXsxsCGfqKCJYHsw0u?p=preview

Answer 4

这就是我为让它发挥作用所做的工作：

    var vm = this;
    vm.objects = [];
    vm.filterData = [];

    vm.getAllRecords(vm);

    vm.totalItems = vm.filterData.length;
    vm.currentPage = 1;
    vm.numPerPage = 5;
    vm.paginate = paginate;
    vm.filterItems = filterItems;

    function paginate(value) {
        var begin, end, index;
        begin = (vm.currentPage - 1) * vm.numPerPage;
        end = begin + vm.numPerPage;
        index = vm.filterData.indexOf(value);
        return (begin <= index && index < end);
    };

    function getAllRecords(vm) {

        $http.post('Get Data from Backend'
        ).then(function successCallback(response) {
            vm.objects = response.data;
            // you can pass blank space at first where you don't know the filter items
            vm.filterItems("");
        }, function errorCallback(response) {

        });

    }

    function filterItems(searchValue) {
        // i am writing this condition because I want to get the search updated even 
       //if you delete one space from the field
        if(searchValue === undefined || searchValue === "") {
            setDisplayItems(vm.objects);
        } else {
            var data = $filter('filter')(vm.objects, searchValue , false, '')
            setDisplayItems(data);
            vm.currentPage = 1;
        }

    }

    function setDisplayItems(data){
        vm.filterData = data;
        vm.totalItems  = data.length;
    }
}

HTML代码：

    <table >
      <thead>
        <tr>
          <th>Name</th>
          <th>ID</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="obj in filterData | filter : paginate ">
          <td>{{obj.name}}</td>
          <td>{{obj.id}}</td>

        </tr>
      </tbody>
    </table>

     <ul uib-pagination total-items="totalItems" ng-model="currentPage"  max-size="5" boundary-links="true" items-per-page="numPerPage" ></ul>

</div>

Answer 5

这里我提供解决方案 ngx-pagination

// install ngx-pagination
npm install ngx-pagination --save


<pagination-controls (pageChange)="p = $event"></pagination-controls>

<div *ngFor="let item of items | filter: filterParam | paginate: { itemsPerPage: 6, currentPage: p }"> </div>

使用带分页的 Angular 过滤器

Using Angular filter with pagination

pagination

angularjs

angular-ui-bootstrap