与搜索查询进行角度分页并转移到服务

时间:2014-08-20 00:30:59

标签: javascript angularjs pagination

我有一个用户列表,我正在尝试对表格进行分页。该表使用了一个带有多个过滤器的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()'>&laquo;</a></li>
  <li ng-repeat='n in range()'><a ng-click='setPage(n)'>{{n + 1}}</a></li>
  <li><a ng-click='nextPage()'>&raquo;</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的服务并将其注入我的用户控制器,但如果用户进行了更改,则根本不会更新。

基本上,我的两个问题是:

  1. 如果我对数据执行搜索,如何重置分页 (重新编号分页元素)
  2. 移动尽可能多的分页代码 尽可能提供服务。

0 个答案:

没有答案