在AngularJS中使用ng-repeat过滤结果6到10的100

Question

我limitTo在docs中看到了过滤器,它允许我限制前5个或最后5个结果,但我想设置我的限制开始的位置,所以我可以显示第二组5个结果.

是否有内置的过滤器？

Answer 1

从Angular 1.4.0开始,limitTo过滤器采用可选begin参数:

<div ng-repeat="item in items | limitTo:5:5">{{item}}</div>

在旧版本中,编写自定义过滤器非常简单.这是一个基于的天真实现Array#slice(请注意,您传递的是第一个和最后一个索引,而不是计数):

app.filter('slice', function() {
  return function(arr, start, end) {
    return (arr || []).slice(start, end);
  };
});

<div ng-repeat="item in items | slice:6:10">{{item}}</div>

工作jsFiddle:http://jsfiddle.net/BinaryMuse/vQUsS/

或者,您可以简单地窃取整个Angular 1.4.0实现limitTo:

function limitToFilter() {
  return function(input, limit, begin) {
    if (Math.abs(Number(limit)) === Infinity) {
      limit = Number(limit);
    } else {
      limit = toInt(limit);
    }
    if (isNaN(limit)) return input;

    if (isNumber(input)) input = input.toString();
    if (!isArray(input) && !isString(input)) return input;

    begin = (!begin || isNaN(begin)) ? 0 : toInt(begin);
    begin = (begin < 0 && begin >= -input.length) ? input.length + begin : begin;

    if (limit >= 0) {
      return input.slice(begin, begin + limit);
    } else {
      if (begin === 0) {
        return input.slice(limit, input.length);
      } else {
        return input.slice(Math.max(0, begin + limit), begin);
      }
    }
  };
}

Answer 2

AngularJS提供了开箱即用的功能.如果您仔细阅读limitTo文档,它允许您指定限制的负值.这意味着最后有N个元素,所以如果要在偏移量为5后处理5个结果,则需要执行以下操作:

<div ng-repeat="item in items | limitTo: 10 | limitTo: -5">{{item}}</div>

Answer 3

我开始玩弄客户的过滤器,但随后发现,你可以调用slice的内部ng-repeat表达:

<div ng-repeat="item in items.slice(6, 10)">{{item}}</div>