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

Question

ドキュメントにlimitToフィルターがあり、最初の 5 つまたは最後の 5 つの結果を制限できますが、制限の開始位置を設定して、5 つの結果の 2 番目のセットを表示できるようにしたいと考えています。

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

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>

Answer 4

limitToブルースクリーンが言ったように、フィルターのみを使用して行うことができますが、Harry Oosterveen によって通知された最後のページの問題を処理するには、追加の作業が必要です.

つまり、 ui-bootstrap paginationディレクティブ プロパティを使用します。

ng-model       = page  // current page
items-per-page = rpp   // records per page
total-items    = count // total number of records

式は次のようになります。

<div ng-repeat="item in items | limitTo: rpp * page | limitTo: rpp * page < count ? -rpp : rpp - (rpp * page - count)">{{item}}</div>

Answer 5

ブルースクリーンの回答から：

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

最後の項目まで N 番目の項目を取得する必要があるシナリオを見つけることもできます。これは limitTo を使用する別の方法です。

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

マイナス記号は、最後から items.length と同じくらい取り、ブラケット内のマイナス 5 は最初の 5 項目をスキップします

Answer 6

@bluescreen の ans と @Brandon の ans は同等ではありません。

例えば：

var pageSize = 3;  
var page = 2;
var items = [1, 2, 3, 4];  

--

item in items | limitTo: page*pageSize | limitTo: -1*pageSize  

[2, 3, 4] を生成する

item in items | slice: (page-1)*pageSize : page*pageSize  

産む [4]