2016-10-03 44 views
0

在代币我有这个代码。如何获得dir分页过滤结果的数组数目?

<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}}如果我把这个我的主控制器上。

UPDATE:

范围位于DIR-分页指令

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

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

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

,然后引用

<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

+0

谢谢,这帮了我很多:) – ghuroo

0

而不是使用DIR-PAGINATE的 - 我创建了一个简单的逻辑,我希望你可以使用此为您的需求.. !!

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

相关问题