我有一个用户列表,我正在尝试对表格进行分页。该表使用了一个带有多个过滤器的ng-repeat。
表格如下所示:
<input class='form-control' id='admin-search' ng-model='query' ng-change='setPage(0)'>
<table class='table table-striped'>
<thead>
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>Username</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr ng-repeat='user in users | filter:query | pagination:currentPage * numPages() | limitTo: pageSize | orderBy:Sort.getOrderProp()'>
<td>{{user.last}}</td>
<td>{{user.first}}</td>
<td>{{user.username}}</td>
<td>{{user.email}}</td>
</tr>
</tbody>
</table>
<ul class='pagination'>
<li><a ng-click='previousPage()'>«</a></li>
<li ng-repeat='n in range()'><a ng-click='setPage(n)'>{{n + 1}}</a></li>
<li><a ng-click='nextPage()'>»</a></li>
</ul>
过滤器会根据顶部的搜索输入修改结果。我需要我的分页随着查询更改而改变。我使用'ng-change =“setPage(0)”'哪种有效,但不会删除分页中显示的页数。
分页过滤器用于根据页面大小和当前页面过滤用户。
app.filter 'pagination', ->
(input, start) ->
input = input || []
start = +start;
input.slice start
现在,我的所有分页代码都在我的用户控制器中。由于它将在其他控制器中使用,我想将其中大部分用于服务,但这样做会破坏它并且无法正确更新。
# Set up pagination
$scope.currentPage = 0
$scope.pageSize = 5
$scope.numPages = ->
Math.ceil($scope.users.length / $scope.pageSize) - 1
$scope.nextPage = ->
if $scope.currentPage < $scope.numPages()
$scope.currentPage++
$scope.previousPage = ->
if $scope.currentPage > 0
$scope.currentPage--
$scope.setPage = (page) ->
$scope.currentPage = page
$scope.range = ->
rangeSize = if 5 > $scope.numPages() then ($scope.numPages() + 1) else 5;
ret = [];
start = $scope.currentPage;
if start > ($scope.numPages() - rangeSize)
start = $scope.numPages() - rangeSize + 1;
i = start
while i < (start + rangeSize)
ret.push i
i++
return ret;
我尝试将上述代码移动到名为pagination的服务并将其注入我的用户控制器,但如果用户进行了更改,则根本不会更新。
基本上,我的两个问题是: