1. ホーム
  2. angularjs

AngularJSでng-repeatを使って100件中6件目から10件目までの結果をフィルタリングする

2023-08-13 01:28:46

質問

私は limitTo フィルタがあり、最初の 5 つ、または最後の 5 つの結果を制限することができますが、私は私の制限が始まる場所を設定したいので、5 つの結果の 2 番目のセットを表示できます。

そのための組み込みのフィルターはありますか?

どのように解決するのですか?

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);
      }
    }
  };
}