在AngularJS中显示记录号

时间:2018-04-10 01:35:12

标签: angularjs

我想显示AngularJS的记录数,样本“15条记录中的1到10条”。一切正常,我想申请页码。我正在使用dir-paginate AngularJS,有没有简单的方法来实现这一目标?真的很感谢你的帮助。这是我的代码: HTML代码:

<table class="primary-table">
    <thead>
        <tr>
            <th>Username</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email</th>
            <th>Contact Number</th>
            <th>Address</th>
            <th>Position</th>
            <th>Status</th>
            <th>Date Added</th>
            <th>Edit</th>
            <th>Delete</th>
        </tr>
    </thead>
    <tbody class="tbodyrow">
        <tr ng-if="members.length==0"><td colspan="11">No Records</td></tr>
        <tr ng-if="members.length>0" dir-paginate="member in members|orderBy:sortKey:reverse|filter:search|itemsPerPage:5">
            <td>{{ member.username }}</td>
            <td>{{ member.first_name }}</td>
            <td>{{ member.last_name }}</td>
            <td>{{ member.email }}</td>
            <td>{{ member.contact }}</td>
            <td>{{ member.address }}</td>
            <td>{{ member.position }}</td>
            <td>{{ member.status }}</td>
            <td>{{ member.dateadded }}</td>
            <td>Edit</td>
            <td>Delete</td>
        </tr>

    </tbody>
    <tfoot class="tfootrow">
        <tr>
            <td colspan="11">
                <div class="grid2">
                    <div><!--number of records info here--></div>
                    <div>
                        <dir-pagination-controls max-size="5"
                            direction-links="true" boundary-links="true" >
                        </dir-pagination-controls>
                    </div>
                </div>
            </td>
        </tr>
    </tfoot>
</table>

JS CODE:

angular.module('app', ['angularUtils.directives.dirPagination']);
angular.module('app').controller('AdminController', function($scope, $http){
  this.fetch = function(){
    $http.get("../Ajax/Administrator/fetch.php").then(function (response) {
      $scope.members  = response.data;
    });
  }
});

1 个答案:

答案 0 :(得分:2)

由于您已经知道页面大小,因此您可以使用模型变量来分配值并使用array.length访问数组的总lentgh

 <h3> 1 to {{ pageSize }} of {{members.length}} records</h3>

<强> DEMO USING PLUNKER