Angularjs 使用pagecount作为选择选项创建ng表_Angularjs_Drop Down Menu_Ngtable

Angularjs 使用pagecount作为选择选项创建ng表

angularjs drop-down-menu

Angularjs 使用pagecount作为选择选项创建ng表,angularjs,drop-down-menu,ngtable,Angularjs,Drop Down Menu,Ngtable,我需要创建一个带有分页的动态ng表。但我需要每页的计数作为选择框。当前默认功能是按钮。请提供建议提前感谢您需要使用自定义分页模板。。。下面就是这样一个例子 <script type="text/ng-template" id="custom/pager"> <ul class="pager ng-cloak"> <li ng-repeat="page in pages" ng-class="{'disabled': !p

我需要创建一个带有分页的动态ng表。但我需要每页的计数作为选择框。当前默认功能是按钮。请提供建议

提前感谢

您需要使用自定义分页模板。。。下面就是这样一个例子

<script type="text/ng-template" id="custom/pager">
    <ul class="pager ng-cloak">
      <li ng-repeat="page in pages"
            ng-class="{'disabled': !page.active, 'previous': page.type == 'prev', 'next': page.type == 'next'}"
            ng-show="page.type == 'prev' || page.type == 'next'" ng-switch="page.type">
        <a ng-switch-when="prev" ng-click="params.page(page.number)" href="">&laquo; Previous</a>
        <a ng-switch-when="next" ng-click="params.page(page.number)" href="">Next &raquo;</a>
      </li>
        <li> 
        <div class="btn-group">
            <button type="button" ng-class="{'active':params.count() == 10}" ng-click="params.count(10)" class="btn btn-default">10</button>
            <button type="button" ng-class="{'active':params.count() == 25}" ng-click="params.count(25)" class="btn btn-default">25</button>
            <button type="button" ng-class="{'active':params.count() == 50}" ng-click="params.count(50)" class="btn btn-default">50</button>
            <button type="button" ng-class="{'active':params.count() == 100}" ng-click="params.count(100)" class="btn btn-default">100</button>
        </div>
        </li>
    </ul>
</script>

您可以像这样使用自定义模板

<table ng-table="tableParams" template-pagination="custom/pager" class="table">
        <tr ng-repeat="user in $data">
            <td data-title="'Name of people'">
                {{user.name}}
            </td>
            <td data-title="'Age'">
                {{user.age}}
            </td>
        </tr>
    </table>


{{user.name}
{{user.age}

我从他们的官方网站上获取了上述示例

您需要使用自定义分页模板。。。下面就是这样一个例子

<script type="text/ng-template" id="custom/pager">
    <ul class="pager ng-cloak">
      <li ng-repeat="page in pages"
            ng-class="{'disabled': !page.active, 'previous': page.type == 'prev', 'next': page.type == 'next'}"
            ng-show="page.type == 'prev' || page.type == 'next'" ng-switch="page.type">
        <a ng-switch-when="prev" ng-click="params.page(page.number)" href="">&laquo; Previous</a>
        <a ng-switch-when="next" ng-click="params.page(page.number)" href="">Next &raquo;</a>
      </li>
        <li> 
        <div class="btn-group">
            <button type="button" ng-class="{'active':params.count() == 10}" ng-click="params.count(10)" class="btn btn-default">10</button>
            <button type="button" ng-class="{'active':params.count() == 25}" ng-click="params.count(25)" class="btn btn-default">25</button>
            <button type="button" ng-class="{'active':params.count() == 50}" ng-click="params.count(50)" class="btn btn-default">50</button>
            <button type="button" ng-class="{'active':params.count() == 100}" ng-click="params.count(100)" class="btn btn-default">100</button>
        </div>
        </li>
    </ul>
</script>

您可以像这样使用自定义模板

<table ng-table="tableParams" template-pagination="custom/pager" class="table">
        <tr ng-repeat="user in $data">
            <td data-title="'Name of people'">
                {{user.name}}
            </td>
            <td data-title="'Age'">
                {{user.age}}
            </td>
        </tr>
    </table>


{{user.name}
{{user.age}

我从他们的官方网站上取了上面的例子，我得到了正确的解决方案

<script type="text/ng-template" id="custom/pager">
<div class="bottom">
<div ng-if="params.settings().counts.length" id="allocateCargoTable_length" class="dataTables_length">
    <label>Show 

    <select ng-param-directive ng-model="pageCount" ng-options ="count for count in params.settings().counts" ng-change="pageCounter(pageCount)">
    </select>
    Rows
    </label>
<div class="dataTables_paginate paging_bs_normal">
    <ul class="pagination ng-table-pagination pull-right"> 
        <li ng-class="{\'disabled\': !page.active}" ng-repeat="page in pages" ng-switch="page.type"> 


            <a ng-switch-when="prev" ng-click="params.page(page.number)" href=""><span class="glyphicon glyphicon-chevron-left"></span>&nbsp;Previous</a>
            <a ng-switch-when="first" ng-click="params.page(page.number)" href=""><span ng-bind="page.number"></span></a> 
            <a ng-switch-when="page" ng-click="params.page(page.number)" href=""><span ng-bind="page.number"></span></a> 
            <a ng-switch-when="more" ng-click="params.page(page.number)" href="">&#8230;</a> 
            <a ng-switch-when="last" ng-click="params.page(page.number)" href=""><span ng-bind="page.number"></span></a> 
            <a ng-switch-when="next" ng-click="params.page(page.number)" href="">Next&nbsp;<span class="glyphicon glyphicon-chevron-right"></span></a> 

        </li> 
    </ul> 
</div>


显示
排

谢谢你的建议。

干杯

我找到了正确的解决方案

<script type="text/ng-template" id="custom/pager">
<div class="bottom">
<div ng-if="params.settings().counts.length" id="allocateCargoTable_length" class="dataTables_length">
    <label>Show 

    <select ng-param-directive ng-model="pageCount" ng-options ="count for count in params.settings().counts" ng-change="pageCounter(pageCount)">
    </select>
    Rows
    </label>
<div class="dataTables_paginate paging_bs_normal">
    <ul class="pagination ng-table-pagination pull-right"> 
        <li ng-class="{\'disabled\': !page.active}" ng-repeat="page in pages" ng-switch="page.type"> 


            <a ng-switch-when="prev" ng-click="params.page(page.number)" href=""><span class="glyphicon glyphicon-chevron-left"></span>&nbsp;Previous</a>
            <a ng-switch-when="first" ng-click="params.page(page.number)" href=""><span ng-bind="page.number"></span></a> 
            <a ng-switch-when="page" ng-click="params.page(page.number)" href=""><span ng-bind="page.number"></span></a> 
            <a ng-switch-when="more" ng-click="params.page(page.number)" href="">&#8230;</a> 
            <a ng-switch-when="last" ng-click="params.page(page.number)" href=""><span ng-bind="page.number"></span></a> 
            <a ng-switch-when="next" ng-click="params.page(page.number)" href="">Next&nbsp;<span class="glyphicon glyphicon-chevron-right"></span></a> 

        </li> 
    </ul> 
</div>


显示
排

谢谢你的建议。

干杯

嗨，我需要“每页计数”按钮作为选择选项。但是我无法设置选择选项的默认值。请使用

Hi，我需要使用每页计数按钮作为选择选项。但是我无法为选择选项设置默认值。请使用