如何在 dir-pagination 上获取过滤结果的数组计数？答案

【问题标题】：How to get array count of filtered result on dir-pagination?如何在 dir-pagination 上获取过滤结果的数组计数？
【发布时间】：2016-10-03 05:44:16
【问题描述】：

目前我有这个代码。

<tr dir-paginate="person in People | filter:q  
| orderBy:sortKey:reverse| itemsPerPage: criteria.pagesize"
 current-page="currentPage" pagination-id="PeoplePagination">

我的问题是如何在控制器上使用角度目录分页时获取过滤数组的计数。

在 dirPagination.tpl.html 的指令模板 url 上，下面的代码提供了价值。

<div class="range-label">Displaying {{ range.lower }} - 
{{ range.upper }} of {{ range.total }}</div>

我的问题是如果我把它放在我的主控制器上，我如何获得 {{range.total}}。

更新：

范围位于 dir-pagination 指令上

   link: function dirPaginationControlsLinkFn(scope, element, attrs) {

                // rawId is the un-interpolated value of the pagination-id attribute. This is only important when the corresponding dir-paginate directive has
                // not yet been linked (e.g. if it is inside an ng-if block), and in that case it prevents this controls directive from assuming that there is
                // no corresponding dir-paginate directive and wrongly throwing an exception.
                var rawId = attrs.paginationId || DEFAULT_ID;
                var paginationId = scope.paginationId || attrs.paginationId || DEFAULT_ID;

                if (!paginationService.isRegistered(paginationId) && !paginationService.isRegistered(rawId)) {
                    var idMessage = (paginationId !== DEFAULT_ID) ? ' (id: ' + paginationId + ') ' : ' ';
                    throw 'pagination directive: the pagination controls' + idMessage + 'cannot be used without the corresponding pagination directive.';
                }

                if (!scope.maxSize) { scope.maxSize = 9; }
                scope.directionLinks = angular.isDefined(attrs.directionLinks) ? scope.$parent.$eval(attrs.directionLinks) : true;
                scope.boundaryLinks = angular.isDefined(attrs.boundaryLinks) ? scope.$parent.$eval(attrs.boundaryLinks) : false;

                var paginationRange = Math.max(scope.maxSize, 5);
                scope.pages = [];
                scope.pagination = {
                    last: 1,
                    current: 1
                };
                scope.range = {
                    lower: 1,
                    upper: 1,
                    total: 1
                };

Here's the Plunker

基本上我想要的是当用户在搜索框中输入内容时获取当前数组大小的值。

【问题讨论】：

您能提供一个完整的代码示例吗？真的很难理解你想要做什么......（例如范围是什么？）
能否请您提供您的代码在plunker或请提供主控制器的代码sn-p
How to display length of filtered ng-repeat data的可能重复

标签： angularjs dirpagination

【解决方案1】：

你可以使用

<li dir-paginate="meal in filteredMeals = (meals | filter:q) 
    | itemsPerPage: pageSize" current-page="currentPage">

然后参考

<span ng-bind="filteredMeals.length"></span>

如https://stackoverflow.com/a/19517533/4068027 所述。

奇怪的是，带有 filter: q as filteredMeals 的 Angular 1.3+ 方法不适用于 dir-paginate（至少不适用于您的 plnkr 中使用的版本）。

See updated plunker

【讨论】：

【解决方案2】：

而不是使用 dir-paginate - 我创建了一个简单的逻辑，我希望你可以使用它来满足你的要求..!!

<script>
var angularPageList = angular.module('angularPageList',['ui.bootstrap']);
angularPageList.controller('listCountControl',['$scope',function($s){
	
	$s.totalListCount = 20;
	$s.currentPage = 1;
	$s.numPages = 1;
	$s.viewby = 5;
	$s.itemsPerPage = $s.viewby;
	$s.maxSize = 5;
  	$s.setItemsPerPage = function(num) {
	  $s.itemsPerPage = num;
	  $s.currentPage = 1; //reset to first page
	}	
	$s.getLastIndex = function (index){
		$s.lastIndex = index;	
		console.log($s.lastIndex)	
	}
	$s.getFirstIndex = function (index){
	    $s.firstIndex = index;
		console.log($s.firstIndex)	
	}
}]);
</script>

<div ng-app="angularPageList">
	<div class="container">
    <h2>List Count - UIB Pagination (AngularJs)</h2>
    <div ng-controller="listCountControl">
		<div class="row" style="margin-top:50px">
    		<div class="col-sm-2 text-center">
        	   	<div ng-repeat="i in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20].slice(((currentPage-1)*itemsPerPage), ((currentPage)*itemsPerPage))">
                	<span ng-init="$last ? getLastIndex(tutorSearchBlok.sBindex) : '';$first ? getFirstIndex(tutorSearchBlok.sBindex) : ''"></span>
           			<span ng-init="$last ? getLastIndex(i) : '';$first ? getFirstIndex(i) : ''"></span>
               		<div style="font-size:18px;padding:10px 0;background:#fafafa;border-top:1px solid #ddd;">{{i}}</div>                    
	           </div>
            </div>
        	<div class="col-sm-6">
            	<span>List Count: &nbsp;&nbsp;</span>&laquo;<b>{{firstIndex+1}}</b> to <b>{{lastIndex+1}}</b>&raquo; of {{totalListCount}}
                <hr>
            	<ul uib-pagination total-items="totalListCount" ng-model="currentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" num-pages="numPages" items-per-page="itemsPerPage"></ul>
            </div>
        </div>
    </div>
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="ui-bootstrap-2.5.0.min.js"></script>

【讨论】：