2016-10-03 21 views
0

私はこのコードを持っています。dir-paginationでフィルタ結果の配列数を取得するにはどうすればよいですか?

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

私の質問は、コントローラ上の角度DIR-ページネーションを使用しているとき、私はフィルタアレイのカウントを取得行う方法です。

dirPagination.tpl.htmlのディレクティブテンプレートURLには、次のコードがあります。

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

私の質問は、私は私のメインコントローラでこれを置けば、私は{{range.totalを}}入手できます方法です。

UPDATE

レンジ

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

基本的に私が欲しいものDIR-ページネーションディレクティブに位置していますが、現在の配列サイズの値を取得するときユーザーが検索ボックスに何かを入力します。

+0

あなたは完全なコード例を提供してもらえますか? – nagyf

+0

あなたのコードをプランナーで提供してもらえますか、またはメインコントローラーのコードスニペットを提供してください – Vikash

+0

[長さを表示するにはどうすればいいですか?フィルタリングされたng-repeatデータ](http://stackoverflow.com/questions/15316363/how-to-display-length-of-filtered-ng-repeat-data) – Aides

答えて

1

あなたは

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

を使用して、https://stackoverflow.com/a/19517533/4068027によって記載されているように

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

を参照することができます。

filter: q as filteredMealsのAngular 1.3+メソッドは、少なくともdir-paginate(少なくともplnkrで使用されているバージョンでは動作しません)で動作しませんでした。代わりにDIR-のpaginateを使用しての

See updated plunker

+0

ありがとう、それは私の多くの助け:) – ghuroo

0

- 私はシンプルなロジックを作成している、私はあなたがあなたの条件のためにこれを使用することを願って..!

<script> 
 
var angularPageList = angular.module('angularPageList',['ui.bootstrap']); 
 
angularPageList.controller('listCountControl',['$scope',function($s){ 
 
\t 
 
\t $s.totalListCount = 20; 
 
\t $s.currentPage = 1; 
 
\t $s.numPages = 1; 
 
\t $s.viewby = 5; 
 
\t $s.itemsPerPage = $s.viewby; 
 
\t $s.maxSize = 5; 
 
    \t $s.setItemsPerPage = function(num) { 
 
\t $s.itemsPerPage = num; 
 
\t $s.currentPage = 1; //reset to first page 
 
\t } \t 
 
\t $s.getLastIndex = function (index){ 
 
\t \t $s.lastIndex = index; \t 
 
\t \t console.log($s.lastIndex) \t 
 
\t } 
 
\t $s.getFirstIndex = function (index){ 
 
\t  $s.firstIndex = index; 
 
\t \t console.log($s.firstIndex) \t 
 
\t } 
 
}]); 
 
</script>
<div ng-app="angularPageList"> 
 
\t <div class="container"> 
 
    <h2>List Count - UIB Pagination (AngularJs)</h2> 
 
    <div ng-controller="listCountControl"> 
 
\t \t <div class="row" style="margin-top:50px"> 
 
    \t \t <div class="col-sm-2 text-center"> 
 
     \t  \t <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))"> 
 
       \t <span ng-init="$last ? getLastIndex(tutorSearchBlok.sBindex) : '';$first ? getFirstIndex(tutorSearchBlok.sBindex) : ''"></span> 
 
      \t \t \t <span ng-init="$last ? getLastIndex(i) : '';$first ? getFirstIndex(i) : ''"></span> 
 
       \t \t <div style="font-size:18px;padding:10px 0;background:#fafafa;border-top:1px solid #ddd;">{{i}}</div>      
 
\t   </div> 
 
      </div> 
 
     \t <div class="col-sm-6"> 
 
      \t <span>List Count: &nbsp;&nbsp;</span>&laquo;<b>{{firstIndex+1}}</b> to <b>{{lastIndex+1}}</b>&raquo; of {{totalListCount}} 
 
       <hr> 
 
      \t <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>

関連する問題