如何使用angular-ui在表格上使用分页

时间:2015-05-19 06:16:49

标签: javascript html angularjs html-table angularjs-ng-repeat

这是我的代码。我尝试了它,但它显示了所有记录,并且分页似乎不起作用。

<div id="lead-casts" class="row" ng-show="showAllCast" width="auto" ng-init="getAllCast()">
<div class="col-sm-12">
    <h1 align="center">All Cast</h1>
    <table class="table table-striped">
        <th align="center"><h4>NAME</h4></th>
        <th align="center"><h4>ROLE</h4></th>
        <tbody>
        <tr ng-repeat="cast in allCast">
            <td>{{ cast.name }}</td>
            <td>{{ cast.role }}</td>
        </tr>
        </tbody>
    </table>
    <pagination total-items="totalItems" items-per-page="20" ng-model="currentPage"></pagination>
    <button class="btn btn-danger pull-left" ng-click="showCast()">Back</button>
    <button class="btn btn-info pull-right" ng-click="showCast()">Next</button>
</div>

我也试过在ng-repeat上使用limitTo过滤器,但它只将显示限制为20项。

<tr ng-repeat="cast in allCast | limitTo: 20">

如何将记录或ng-repeat绑定到分页?

1 个答案:

答案 0 :(得分:0)

使用startFrom和limitTo 这里是  jsfiddle demo http://jsfiddle.net/2ZzZB/56/