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.
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
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
.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.