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);
}
}
};
}
関連
-
[解決済み] 誰かangularjsの$qサービスの使用について説明してください。[重複しています]。
-
[解決済み] Angular.js: $evalの仕組みとバニラevalとの違いは何ですか?
-
[解決済み] angular.serviceとangular.factoryの比較
-
[解決済み] AngularJSのng-repeatでキーと値を反復処理する方法は?
-
[解決済み] なぜAngularJSはselectに空のオプションを含めるのですか?
-
[解決済み] AngularJSのngClassの条件付き
-
[解決済み] ng-repeat :単一フィールドによるフィルタリング
-
[解決済み] AngularJS 。非同期データでサービスを初期化する
-
[解決済み] AngularJsの辞書にng-repeatを使用するには?
-
[解決済み] AngularJSとng-repeatによるselectの初期化
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】Angularjsのng-viewが動作しない。
-
[解決済み] 適用がすでに進行中のエラー
-
[解決済み] AngularJSのグローバル変数
-
[解決済み] data-ng-file-selectが動作しないのはなぜですか?
-
[解決済み] エラーです。[$injector:unpr] 不明なプロバイダです。ルートプロバイダ
-
[解決済み] angularjsで$compileを操作する
-
[解決済み] ng-pattern` - 数字だけをチェックする方法は?
-
[解決済み] AngularJSを使用して、ブラウザのコンソールで$scope変数にアクセスするにはどうすればよいですか?
-
[解決済み] angular.serviceとangular.factoryの比較
-
[解決済み] AngularJS コントローラにおける 'this' と $scope の比較