角度の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> 

はどのような角度でのページと検索ページで「72の結果の10にショー1」を得ることができますか？

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'; 
    };