[解決済み] 配列上で繰り返すのではなく、定義された回数をng-repeatする方法?
2022-03-24 23:42:13
質問
の方法はありますか?
ng-repeat
配列に対して常に反復処理を行うのではなく、定義された回数だけ反復処理を行うのですか?
例えば、以下のように、リストアイテムを5回表示させたいと仮定します。
$scope.number
は 5 に等しく、さらに各リストアイテムが 1, 2, 3, 4, 5 のように増加するように番号を増加させます。
望ましい結果
<ul>
<li><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span>4</span></li>
<li><span>5</span></li>
</ul>
解決方法は?
更新情報(2018/9/25)
AngularJSの新しいバージョン(>= 1.3.0)では、変数だけでできるようになりました(関数が不要)。
<li ng-repeat="x in [].constructor(number) track by $index">
<span>{{ $index+1 }}</span>
</li>
$scope.number = 5;
質問された当初は不可能でした。 この更新については、以下の @Nikhil Nambiar 氏の回答がクレジットされています。
オリジナル(2013/5/29)
現時点では
ng-repeat
はパラメータとしてコレクションしか受け付けないが、こんなこともできる。
<li ng-repeat="i in getNumber(number)">
<span>{{ $index+1 }}</span>
</li>
そして、コントローラのどこか。
$scope.number = 5;
$scope.getNumber = function(num) {
return new Array(num);
}
これによって
$scope.number
を好きな数に変えても、求めているバインディングは維持されます。
を編集 (2014年1月6日)
-- AngularJSの新しいバージョン(>= 1.1.5)では、以下のものが必要です。
track by $index
:
<li ng-repeat="i in getNumber(number) track by $index">
<span>{{ $index+1 }}</span>
</li>
フィドルはこちら
を使ったいくつかのリストと、同じ
getNumber
関数を使用します。
関連
-
vueのプロジェクトでモックを使用する方法を知っていますか?
-
[解決済み】React Nativeアプリをターミナルから実行するとエラーが発生する(iOS)
-
[解決済み] Web API エラー - このリクエストはブロックされました; コンテンツは HTTPS で提供されなければなりません
-
[解決済み】React-Redux: アクションはプレーンオブジェクトでなければならない。非同期アクションにはカスタムミドルウェアを使用する
-
HTML5 LocalStorage ローカルストレージとセッションストレージの使用法
-
モジュールのビルドに失敗しました。Error: ENOENT: no such file or directory, scandir 'D:\.... \node_modules
-
[解決済み] 文字列が有効な数値であるかどうかを確認するにはどうすればよいですか?
-
[解決済み] AngularJSのng-repeatでキーと値を反復処理する方法は?
-
[解決済み] JavaScriptでオブジェクトの配列から明確な値を取得する方法は?
-
[解決済み】JavaScriptで文字列を何度も繰り返す
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
JSクロスドメインソリューション リアクト構成 リバースプロキシ
-
fetch ネットワークリクエストラッパーの説明例
-
vueにおけるv-forループオブジェクトのプロパティ
-
vueが定義するプライベートフィルタと基本的な使い方
-
[解決済み】React - uncaught TypeError: 未定義のプロパティ 'setState' を読み取れない
-
[解決済み】Node Version Manager のインストール - nvm コマンドが見つかりません。
-
[解決済み】"フォームが接続されていないため、フォームの送信がキャンセルされました "というエラーの取得について
-
[解決済み】 `string.split is not a function` というエラーの原因は何ですか?
-
[解決済み】React Uncaught Error: 対象コンテナが DOM 要素でない [重複]。
-
[解決済み] JavaScriptには、与えられた範囲内の範囲を生成する "range() "のようなメソッドがありますか?