使用带有分页的 Angular 过滤器答案

【问题标题】：Using Angular filter with pagination使用带有分页的 Angular 过滤器
【发布时间】：2016-11-20 05:26:36
【问题描述】：

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

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

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

这可以正常工作并且可以完美地过滤项目。出现问题是因为我正在使用带有 uib-pagination 元素的 displayItems。分页使用 totalItems 而不是 displayItems。

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

显然我需要以某种方式对总项目应用过滤器，然后创建显示项目，并将过滤后的项目放在 uib 分页中。

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

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

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

【问题讨论】：

将total-items 更改为：total-items="filteredItems.length"。
在控制器中将全部项目变成过滤项目 - 我如何创建这些过滤项目是问题？
试试这个。 plnkr.co/edit/9diyq1FdTorI5kKmitDd?p=preview

标签： angularjs pagination angular-ui-bootstrap

【解决方案1】：

这里我用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>

【讨论】：

【解决方案2】：

这是我为使它工作所做的工作：

    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>

【讨论】：

【解决方案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

【讨论】：

干杯 - 这正是我想要的！
太好了，它在 ui-bootstrap-tpls-2.1.4.min 上非常适合我
哇，我从未见过有人在ng-repeat 中使用filteredData = ...。太奇妙了。请注意，括号必须完全一样才能工作。
+1 但对于像我这样的 begin 参数不起作用的人来说，请注意。 begin 参数仅在 1.4.X 版本之后引入。就我而言，我使用的是 Angular 1.3.14，花了几个小时才弄清楚出了什么问题：/ Reference link

【解决方案4】：

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

<!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>

【讨论】：

【解决方案5】：

您可以在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>

【讨论】：

嗨，这看起来有点像我想要的。但在我的示例中，我有 displayItems 和 totalItems。显示项目是我应该显示的十个项目，这些项目来自总项目。我想我在这里所做的有些困惑。我正在对 displayItems 进行过滤，而我确实应该对 totalItems 进行过滤。我想我需要在控制器的一个函数内进行过滤。让我编辑问题以反映这一点.....
创建简单的 plunker 演示。我注意到不同的数组，但显示的代码不足以对它们进行排序
这不起作用，因为它只过滤显示项目。创建过滤数组。 IE。如果我们有 20 个 totalItems，我们有两个页面，每个页面使用 displayItems 显示 10 个项目。我们需要过滤 20，给我们 4，比如说。在您的示例中，您正在过滤当前显示的 10 个，而不是总数。