How to get array count of filtered result on dir-pagination?

Question

At the monent I have this code.

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

My question is how to do I get the count for the filtered array when using angular dir-pagination on the controller.

on the directive template url which is dirPagination.tpl.html the code below provides value.

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

My question is how do I get the {{range.total}} if I put this on my main controller.

UPDATE :

Range is located on dir-pagination directive

   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

Basically what I want is to get the value of the current array size when the user enter something on the searchbox.

Could you provide a full code example? It is really hard to understand what you are trying to do... (e.g. what is range?) — nagyf, Oct 03 '16 at 06:43
Can you please provide your code in a plunker or please provide the code snippet of main controller — Vikash B, Oct 03 '16 at 07:19
Possible duplicate of [How to display length of filtered ng-repeat data](http://stackoverflow.com/questions/15316363/how-to-display-length-of-filtered-ng-repeat-data) — Aides, Nov 10 '16 at 11:32

score 2 · Answer 1 · edited May 23 '17 at 10:31

You could use

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

and then reference

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

as described by https://stackoverflow.com/a/19517533/4068027.

Strangely enough the Angular 1.3+ method with filter: q as filteredMeals did not work with dir-paginate (at least not with the versions used in your plnkr).

See updated plunker

score 0 · Answer 2 · answered Apr 24 '17 at 09:45

Instead of using dir-paginate - I have created a simple logic, I hope you can use this for your requirement..!!

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

How to get array count of filtered result on dir-pagination?

2 Answers2