Question

我正在对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中。

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

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

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

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，

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

您可以使用as alias表达式

中的ng-repeat来访问已过滤的数组

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

这是我使其工作所要做的：

    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 4

我在这里提供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>

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>

使用角度过滤器和分页

5 个答案: