[英]Angularjs ng-repeat filter
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. 我一直在寻找一种解决方案,使用内置滤波器的角度,使用与用于ng-repeat的数据集不同的数据集,但我没有遇到过任何问题。
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. 例如,在此代码段中,过滤器只会过滤
filteredPages
数据,但问题是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 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.list_data
是我想要过滤的数据。 $scope.filteredPages
is the paginated result, so when using the filter it only searches the page that you are currently on. $scope.filteredPages
是分页结果,因此在使用过滤器时,它只搜索您当前所在的页面。
ng-model search ng-model搜索
<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
) 我通过使用
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>
I've omitted the orderBy
so don't forget to add it back in 我省略了
orderBy
所以不要忘记将其添加回来
Directive mash-up I used previously: ng-repeat="row in pageRows = (data | filter:search) | limitTo:itemsPerPage:itemsPerPage*(currentPage-1)"
我以前用过的指令混搭:
ng-repeat="row in pageRows = (data | filter:search) | limitTo:itemsPerPage:itemsPerPage*(currentPage-1)"
Where I defined some of the params in the JS side. 我在JS方面定义了一些参数。 I had the pagination bit integrated with ng bootstrap and used
uib-pagination
. 我将分页位与ng bootstrap集成并使用了
uib-pagination
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.