Angularjs ng-repeat filter

Question

I have been looking for a solution to using angulars built in filter with a different data set than that what is used for the ng-repeat but I haven't come across anything.

For example in this code snippet the filter would only be filtering data inside of filteredPages but the problem with this is that filteredPages is only the first page of paginated results, I want to filter the original data that filteredPages is created from.

 <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 is the data I would like to filter through. $scope.filteredPages is the paginated result, so when using the filter it only searches the page that you are currently on.

ng-model search

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

Would I have to create my own filter or is there another way I can do it? If anyone has an idea on how I can achieve this, would be appreciated. Thank you in advance.

Answer 1

I've managed it by using list_data as the repeater and the built in limitTo filter (Which allows a second parameter 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>

I've omitted the orderBy so don't forget to add it back in

Answer 2

Directive mash-up I used previously: ng-repeat="row in pageRows = (data | filter:search) | limitTo:itemsPerPage:itemsPerPage*(currentPage-1)"

Where I defined some of the params in the JS side. I had the pagination bit integrated with ng bootstrap and used uib-pagination.