使用Angular过滤器实现分页

Question

我正在像这样在ng-repeat上使用一个数组过滤器:

```html

我正在像这样在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>

显然，我需要在total-items上应用过滤器，然后创建displayItems，并将过滤后的filteredItems放入uib-pagination中。

例如，在控制器中，当用户输入时，应用过滤器到totalItems，然后创建分页所需的filteredItems。然后从filteredItems创建displayItems。我该如何将其放入控制器中而不是HTML的ng-repeat中呢？

我不确定该怎么做，你有什么想法吗？非常感谢您的帮助...

我已经包含了一个plunker来展示它（不）在所有其辉煌中运行... https://plnkr.co/edit/EYX6zO1795sD9TYq2J8U?p=preview

- Tom O'Brien

---

将 total-items 更改为：total-items="filteredItems.length"。 - developer033

将Controller中的total-items转换为filteredItems - 如何创建这些过滤项是问题？ - Tom O'Brien

试试这个。https://plnkr.co/edit/9diyq1FdTorI5kKmitDd?p=preview - charlietfl

Answer 1

尝试,

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，

->

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

- user1111

---

谢谢 - 这正是我在寻找的！ - Tom O'Brien

太好了，它在ui-bootstrap-tpls-2.1.4.min上完美地运行了。 - Kwesi Aryee

哇，我从未见过有人在ng-repeat中使用filteredData = ...。太神奇了。请注意，括号必须完全像这样才能正常工作。 - Nick M

对于像我这样的人来说，+1，但需要提醒一下，begin参数可能无法正常工作。该参数仅在1.4.X版本之后引入。在我的情况下，我正在使用Angular 1.3.14，花了我几个小时才找出问题所在 :/ 参考链接 - Gowthaman

Answer 2

您可以通过在 ng-repeat 表达式中使用 as 别名 来访问过滤后的数组。

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

- charlietfl

---

嗨，那看起来有点像我想要的。但是在我的例子中，我有displayItems和totalItems。显示项是我应该显示的任意十个项目，这些项目来自总项目。我想我在这里做的有些混淆。我正在过滤displayItems，而我真正应该过滤totalItems。我认为我需要在控制器中的一个函数内进行过滤。让我编辑问题以反映这一点... - Tom O'Brien

创建一个简单的 Plunker 演示。我注意到有不同的数组，但是没有足够的代码来对它们进行排序。 - charlietfl

这样做是不起作用的，因为它只过滤了displayItems而没有创建filteredArray。例如，如果我们有20个totalItems，我们有两页，每页使用displayItems显示10个项目。我们需要过滤这20个项目，比如说得到4个。在你的例子中，你正在过滤当前显示的10个项目，而不是总数。 - Tom O'Brien

Answer 3

这里我提供了使用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>

- Bhaskararao Gummidi

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>

- Kabiraj Kharel

Answer 5

请更改此类型，但如果您仅搜索与一个字段相关的内容，为什么要进行特定搜索。如果您有更多的字段，则无需这样做。请将其修改为一些代码，我希望它能正常工作。

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

- VjyV