Question

我一直在寻找使用内置过滤器的角度解决方案的解决方案，其数据集与用于ng-repeat的数据集不同，但我没有遇到过任何问题。

例如，在此代码段中，过滤器只会过滤filteredPages内的数据，但问题是filteredPages只是分页结果的第一页，我想过滤原始从filteredPages创建的数据。

 <tr ng-repeat="rate in filteredPages | filter:search | orderBy:sortType:sortReverse ">
        <td data-title="'location'">{{rate.location}}</td>
        <td data-title="'code'">{{rate.code}}</td>
        <td data-title="'peak_charge'">{{rate.charge_peak}}</td>
        <td data-title="'offpeak_charge'">{{rate.charge_offpeak}}</td>
       <td data-title="'connnection_charge'"> {{rate.connection_charge}}</td>
 </tr>

filteredPages

 $scope.$watch('currentPage', function () {
    //Define the pagination functionality....
    var begin = (($scope.currentPage - 1) * $scope.numPerPage)
    var end = begin + $scope.numPerPage;
    $scope.filteredPages = $scope.list_data.slice(begin, end);

    return $scope.filteredPages;
});

$scope.list_data是我想要过滤的数据。 $scope.filteredPages是分页结果，因此在使用过滤器时，它只搜索您当前所在的页面。

ng-model search

<div class="form-group">
            <input type="text" ng-disabled="check" ng-model="search" class="form-control" placeholder="Filter By">
</div>

我是否必须创建自己的过滤器，还是有另外一种方法可以做到？如果有人知道如何实现这一点，将不胜感激。先感谢您。

Answer 1

我使用list_data作为转发器和内置limitTo过滤器（允许第二个参数begin）来管理它

var myApp = angular.module('myApp', []).controller("MyCtrl", MyCtrl);

function MyCtrl($scope) {
  $scope.currentPage = 1;
  $scope.list_data = [{item: '1'}, {item: '2'}, {item: '3'}, {item: '4'}, {item: '5'}, {item: '6'}, {item: '7'}, {item: '8'}, {item: '9'}, {item: '10'}, {item: '11'}, {item: '12'}, {item: '13'}, {item: '14'}, {item: '15'}];

  $scope.numPerPage = 5;
  $scope.begin = (($scope.currentPage - 1) * $scope.numPerPage)
  $scope.end = $scope.begin + $scope.numPerPage;
  $scope.search = null;


  $scope.$watch('currentPage', function() {
    //Define the pagination functionality....
    $scope.begin = (($scope.currentPage - 1) * $scope.numPerPage)
    $scope.end = $scope.begin + $scope.numPerPage;
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="MyCtrl">
    <input type="text" ng-model="search" />
    <table>
      <tr ng-repeat="rate in list_data | filter:search | limitTo:end:begin ">
        <td data-title="'location'">{{rate.item}}</td>
      </tr>
    </table>
  </div>
</div>

我省略了orderBy所以不要忘记将其添加回

Answer 2

我之前使用的指令混搭： ng-repeat="row in pageRows = (data | filter:search) | limitTo:itemsPerPage:itemsPerPage*(currentPage-1)"

我在JS方面定义了一些参数。我将分页位与ng bootstrap集成并使用uib-pagination。

Angularjs ng-repeat过滤器

2 个答案: