Angularjs ng-repeat 过滤器答案

【问题标题】：Angularjs ng-repeat filterAngularjs ng-repeat 过滤器
【发布时间】：2018-01-12 08:46:25
【问题描述】：

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

例如，在这段代码 sn-p 中，过滤器只会过滤 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>

过滤页面

 $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-模型搜索

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

我必须创建自己的过滤器还是有其他方法可以做到？如果有人对我如何实现这一点有任何想法，将不胜感激。先感谢您。

【问题讨论】：

我想过滤创建 filteredPages 的原始数据。你能告诉我们吗
您有文本框或任何其他过滤器选项吗？过滤器中的搜索是什么？
@George 添加到问题中
@Shafeeque 搜索是文本框，也已将其添加到问题中
@Kyle 谢谢，看起来你最好的选择是使用$scope.list_data 作为转发器并创建一个自定义过滤器，然后像这样设置它们ng-repeat="rate in list_data | filter:search | currentPage: pageStartAndEnd | orderBy:sortType:sortReverse " 或者添加一个ng-change 到search

标签： javascript angularjs

【解决方案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，所以别忘了把它加回来

【讨论】：

谢谢您，过滤器完美运行！尽管它在分页方面产生了一个小问题，但它仍然可以工作，但不是在单击下一页时交换结果，而是将它们附加到底部
@Kyle 这很奇怪，如果您自己解决问题，您可以将其作为另一个问题发布
会做的，我还是个学徒，所以我给自己一个小时、一个半小时，如果我觉得我没有得到任何地方，我就在这里问。感谢您的所有帮助@George

【解决方案2】：

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

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

【讨论】：