12 개 중 1 ~ 10 개를 각도로 표시하는 방법

Question

각도의 표 하단에 페이지 매김 세부 정보를 표시하고 싶습니다.

<table> 
    <tr dir-paginate="reject in rejects|orderBy:sortKey:reverse|filter:search|itemsPerPage:itemsPerPage" 
           current-page="currentPage" style="border-bottom: solid 1px #ccc"> 
<td>@{{itemsPerPage *(currentPage-1)+$index+1}}</td> 
<td><a ng-href="recorddetail/@{{reject.rec_id}}" 
    style="text-decoration: none;">@{{reject.fullname}}</a></td> 
         <td>@{{reject.name}}</td> 
         <td>@{{reject.id}}</td> 
         <td>@{{reject.placeofb}}</td> 
         <td>@{{reject.dateofb}}</td>       
         </tr> 

    </table> 

    <div style="float: left"> 
     <span>Showing Result @{{itemsPerPage *(currentPage-1)+$index+1}} to @{{  
     (itemsPerPage * currentPage) }} of @{{rejects.length}}</span>  
    </div> 
    <dir-pagination-controls 
     page-size="1" direction-links="true" 
      boundary-links="true" style="margin-top: 0; float: right;margin-bottom: 
     10px;"> 
    </dir-pagination-controls> 

어떻게 내가 얻을 수있는 "쇼 1 72 개 결과의 10"페이지와 검색 페이지의 각도에서 : 나는이 코드를 시도?

Answer 1

UI 그리드는 이전 순수 AngularJS와 라이브러리를 기반으로 NG 그리드로 알려져 있으며 그것은 모든 핵심 그리드

당신은 시도 할 수 있습니다 등, 수출, 필터링, 정렬, 페이징 같은 기능 덮여 ui-grid

Answer 2

어떻게 할 수 있는지 한 가지 생각이 있습니다. 그것은, 내가 NG-그리드 2.0.8.js를 사용하고 나를 위해 일한

서버에서 데이터를 수신 할 때 - 얼마나 많은 페이지 그리고 총

$scope.totalPages = 0; 
function getData() { 
    ... 
    $scope.totalPages = Math.ceil(data.length/pageSize); 
    ... 
}; 

에서 당신이 보여주는 있는지 확인 계산 꼬리말을 만들고 맞춤 템플릿을 사용하세요.

$scope.gridOptions = { 
    ... 
    showFooter: true, 
    footerTemplate: getCustomFooterTemplate(), 
    ... 
}; 

function getCustomFooterTemplate() { 
     return "footerTemplate.html", 
      '<div ng-show="showFooter" class="ngFooterPanel" ng-class="{\'ui-widget-content\': jqueryUITheme, ' + 
      '\'ui-corner-bottom\': jqueryUITheme}" ng-style="footerStyle()">\n' + 
      ' <div class="ngTotalSelectContainer" >\n' + 
      '  <div class="ngFooterTotalItems" ng-class="{\'ngNoMultiSelect\': !multiSelect}" >\n' + 
      '   <span class="ngLabel">{{i18n.ngTotalItemsLabel}} {{maxRows()}}</span>' + 
      '   <span ng-show="filterText.length > 0" class="ngLabel">({{i18n.ngShowingItemsLabel}} ' + 
      '   {{totalFilteredItemsLength()}})</span>\n' + 
      '  </div>\n' + 
      '  <div class="ngFooterSelectedItems" ng-show="multiSelect">\n' + 
      '   <span class="ngLabel">{{i18n.ngSelectedItemsLabel}} {{selectedItems.length}}</span>\n' + 
      '  </div>\n' + 
      ' </div>\n' + 
      ' <div class="ngPagerContainer" style="float: right; margin-top: 10px;" ng-show="enablePaging" ' + 
      ' ng-class="{\'ngNoMultiSelect\': !multiSelect}">\n' + 
      '  <div style="float:left; margin-right: 10px;" class="ngRowCountPicker">\n' + 
      '   <span style="float: left; margin-top: 3px;" class="ngLabel">{{i18n.ngPageSizeLabel}}</span>\n' + 
      '   <select style="float: left;height: 27px; width: 100px" ng-model="pagingOptions.pageSize" >\n' + 
      '    <option ng-repeat="size in pagingOptions.pageSizes">{{size}}</option>\n' + 
      '   </select>\n' + 
      '  </div>\n' + 
      '  <div style="float:left; margin-right: 10px; line-height:25px;" class="ngPagerControl" ' + 
      '  style="float: left; min-width: 135px;">\n' + 
      '   <button type="button" class="ngPagerButton" ng-click="pageToFirst()" ' + 
      '   ng-disabled="cantPageBackward()" title="{{i18n.ngPagerFirstTitle}}">' + 
      '   <div class="ngPagerFirstTriangle"><div class="ngPagerFirstBar"></div></div></button>\n' + 

      '   <button type="button" class="ngPagerButton" ng-click="pageBackward()" ' + 
      '   ng-disabled="cantPageBackward()" title="{{i18n.ngPagerPrevTitle}}"><div ' + 
      '   class="ngPagerFirstTriangle ngPagerPrevTriangle"></div></button>\n' + 

      '   <label style="vertical-align: top; font-weight: inherit;">{{pagingOptions.currentPage}} to {{totalPages}} of {{maxRows()}}</label>\n' + 

      '   <button type="button" class="ngPagerButton" ng-click="pageForward()" ' + 
      '   ng-disabled="cantPageForward()" title="{{i18n.ngPagerNextTitle}}"><div ' + 
      '   class="ngPagerLastTriangle ngPagerNextTriangle"></div></button>\n' + 

      '   <button type="button" class="ngPagerButton" ng-click="pageToLast()" ' + 
      '   ng-disabled="cantPageToLast()" title="{{i18n.ngPagerLastTitle}}">' + 
      '   <div class="ngPagerLastTriangle"><div class="ngPagerLastBar"></div></div></button>\n' + 
      '  </div>\n' + 
      ' </div>\n' + 
      '</div>\n'; 
    };