javascript - AngularJS limitTo 过滤器

Question

据我了解，在 AngularJS 中，名为“limitTo”的过滤器用于限制数据。

假设我们有 100 条记录，并且我们使用以下方法将数据限制为 10 条记录limitTo 过滤器。

现在如何显示剩余的 90 条记录。我需要底部有某种下一个和上一个按钮当我点击它时应该显示接下来的 10 条记录，依此类推。

我怎样才能在不影响任何性能的情况下实现这一目标。如果可以的话请提供代码。谢谢...:-)

Answer 1

根据 limitTo docs有 start 和 limit

的参数

{{ limitTo_expression | limitTo : limit : begin}}

因此，您可以按照以下简单示例对这些参数使用作用域变量:

<p ng-repeat="item in items|limitTo:limit:start">{{item.name}}</p>
<button ng-click="next()" ng-if="start < items.length-10">Next</button>
<button ng-click="prev()" ng-if="start >0">Prev</button>

JS

  $scope.start = 0;
  $scope.limit = 10;
  $scope.items = [/* some data*/];      

  $scope.next = function() {
    incrementLimit(true)
  }
  $scope.prev = function() {
    incrementLimit(false)
  }

  function incrementLimit(up) {
    if (up) {
      ($scope.start <= ($scope.items.length - $scope.limit)) ? $scope.start += 10: $scope.start = 0;
    } else {
      $scope.start > 10 ? $scope.start -= 10 : $scope.start = 0;

    }
  }

DEMO