Question

我有这个代码。

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

我的问题是如何在控制器上使用angular dir-pagination时获取已过滤数组的计数。

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

<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

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

Answer 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

Answer 2

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

＆＃13;

<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>

＆＃13;

<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>

＆＃13;

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

2 个答案: