AngularJS ng-repeat ディレクティブと例

替え： ジェームズ・ハートマン ジェームズ・ハートマン
Hours 更新中

⚡ スマートサマリー

AngularJS の ng-repeat ディレクティブは、コントローラー スコープで定義されたコレクション内の各項目に対して、要素のコピーを 1 つレンダリングします。これにより、手動でループを記述することなく、配列をリスト、テーブル、または任意の繰り返しマークアップに変換できます。

  • 🔁 コア行動： ng-repeatはアイテムごとにホスト要素を1回複製するため、このディレクティブは繰り返される要素に適用する必要があり、コンテナに適用するべきではありません。
  • 🏷️ ループ変数: 「in」という単語の前の名前は、そのクローン内の現在のアイテムのローカルエイリアスになります。
  • 🧬 子どもの範囲: 各イテレーションはそれぞれ独自の子スコープを持つため、ループ内でプリミティブ型を代入しても親スコープには到達しません。
  • 🔑 アイデンティティ Tracking: A trac式による k は、AngularJS がアイテムを識別する方法を指示するもので、コレクションに重複する値が含まれる場合に必要です。
  • 🔢 地元に根付いたもの： 各イテレーション内では、$index、$first、$lastなどのプロパティを使用して、番号付けやスタイル設定を行うことができます。
  • ⚠️ サポート状況: AngularJSは2021年12月31日にサポートが終了し、それ以降セキュリティパッチは提供されません。
プロフィール

AngularJS ng-repeat ディレクティブ

AngularJS の ng-repeat ディレクティブ

その NGリピート 指令 AngularJS の ng-repeat は、コントローラーで定義された繰り返し値を表示するために使用されます。ビューにアイテムのリストを表示する必要がある場合、ng-repeat はコントローラーで定義されたリストをビューページにレンダリングします。

⚠️ サポートに関するお知らせ： AngularJSが到達 2021年12月31日をもって販売終了となります。 そして、これ以上のパッチやセキュリティ修正は提供されません。以下の指示は、既存の AngularJS 1.x アプリケーションを維持する上で依然として有効です。 角度の 同等のものは *ngFor 構造的指示。

AngularJS ng-repeat ディレクティブの例

AngularJSにおけるng-repeatディレクティブの例を見てみましょう。

AngularJS の ng-repeat ディレクティブ

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>
<h1>Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.8.3/angular.js"></script>

<div ng-app="DemoApp" ng-controller="DemoController">
    <h1>Topics</h1>
    <ul>
        <li ng-repeat="tpname in TopicNames">
            {{tpname.name}}
        </li>
    </ul>
</div>

<script>
    var app = angular.module('DemoApp', []);

    app.controller('DemoController', function($scope) {
        $scope.TopicNames = [
            { name: "What controllers do from Angular's perspective" },
            { name: "Controller Methods" },
            { name: "Building a basic controller" }
        ];
    });
</script>

</body>
</html>

Code 説明：

  1. コントローラまず、ビューに表示するリスト項目の配列を定義します。ここで、配列は TopicNames それぞれ名前と値のペアである3つの項目を保持します。
  2. 配列は直接割り当てられます $scope.TopicNamesこれにより、このコントローラにバインドされたビューで使用できるようになります。
  3. HTMLタグ <ul> （順不同リスト） <li> （リスト項目）項目を表示します。ng-repeat ディレクティブは配列の各エントリを反復処理し、 tpname 現在のアイテムを保持するローカル変数なので、 {{tpname.name}} 名前プロパティを出力します。

⚠️訂正： 元の説明では、配列は「メンバー変数に追加されました」と述べられていました。 topics「。コードにはそのような変数は存在しません。配列は直接割り当てられます。 $scope.TopicNamesこれはビューが参照する名前です。ここに別の名前を追加すると、リストが空になる一般的な原因となります。

コードが正常に実行されると、ブラウザに以下の出力が表示されます。

AngularJS の ng-repeat ディレクティブ

AngularJS の複数のコントローラー

先ほど、加算と減算の両方を1つのメソッドで処理する単一のコントローラを見ました。trac数値の処理ではなく、複数のコントローラを使用してロジックをより明確に分離することができます。たとえば、1 つのコントローラで数値を処理し、別のコントローラで文字列を処理するようにできます。

AngularJSアプリケーションで複数のコントローラーを定義する例を見てみましょう。

AngularJS の複数のコントローラー

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>
<h1>Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.8.3/angular.js"></script>

<div ng-app="DemoApp">
    <div ng-controller="firstcontroller">
        <div ng-controller="secondcontroller">
            {{lname}}
        </div>
    </div>
</div>

<script>
    var app = angular.module('DemoApp', []);

    app.controller('firstcontroller', function($scope) {
        $scope.pname = "firstcontroller";
    });

    app.controller('secondcontroller', function($scope) {
        $scope.lname = "secondcontroller";
    });
</script>

</body>
</html>

Code 説明：

  1. 2つのコントローラが定義されています。 firstcontroller (NAIST) と secondcontrollerそれぞれが自身の変数に紐づける スコープ: pname まず、 lname 第二に。
  2. ビューでは、2 番目のコントローラは最初のコントローラの中にネストされており、式は次のようになります。 lname 内部スコープから。ネストされたコントローラは親から継承するため、 {{pname}} ここでも解決するだろう――継承は下へ流れるものであり、上へ流れるものではない。

コードが正常に実行されると、テキスト セカンドコントローラー 表示されています。

AngularJS の複数のコントローラー

お見逃しなく：

使い方 track は ng-repeat で使用されます

ng-repeat の最も一般的な失敗は、次のエラーです。 Duplicates in a repeater are not allowedコレクションに同じ値が2回含まれた瞬間に発生し、リストのレンダリングを完全に停止します。

原因はアイデンティティである tracキング。AngularJS は、各アイテムに対して安定したキーを必要とします。そうすることで、ダイジェストごとに DOM ノードを再構築するのではなく、再利用できるようになります。デフォルトではアイテムの値自体が使用されるため、同じ値が 2 つ存在すると衝突します。

<!-- Fails: the value 2 appears twice -->
<li ng-repeat="n in [1, 2, 2, 3]">{{n}}</li>

<!-- Works: position is unique even when values repeat -->
<li ng-repeat="n in [1, 2, 2, 3] track by $index">{{n}}</li>

<!-- Best for records from a server: track by a real identifier -->
<li ng-repeat="topic in TopicNames track by topic.id">{{topic.name}}</li>

どちらの形式を選ぶかは、一見した以上に重要な意味を持つ。 Tracking by $index 位置は定義上一意であるため、常にエラーは解決されますが、各 DOM ノードをレコードではなくスロットに結び付けます。コレクションの並べ替えやフィルタリングを行うと、間違ったノードが再利用され、入力フィールドがキープされるという形で現れます。ping 前の行のテキスト。

Tracking 真正な識別子によって topic.id はそれを完全に回避します。AngularJS は各レコードの移動を追跡できるため、ノードを破棄して再構築するのではなく、既存のノードを並べ替えます。長いリストでは、再レンダリングは実際に変更された行のみに影響を与えるため、これは著しく高速です。 $index 順序が変更されない単純な値の配列にのみ適用されます。

ng-repeat 内部で利用可能な特別なプロパティ

ng-repeat の各イテレーションでは、子スコープにいくつかの読み取り専用プロパティが公開されます。これらのプロパティは、現在のアイテムがコレクション内のどこにあるかを記述し、コントローラーに余分な状態を追加することなく、番号付け、交互スタイル、区切り文字などを管理します。

プロパティ タイプ 値
$index 数 現在のアイテムの位置（0から開始）
$first ブーリアン 最初の項目のみに当てはまります
$last ブーリアン 最後の項目のみに当てはまります
$middle ブーリアン 最初でも最後でもないすべての項目に当てはまります
$even ブーリアン $indexが偶数の場合に真となります。
$odd ブーリアン $indexが奇数の場合に真となる

典型的な使用例としては、ゼブラストライプのng-classと組み合わせて使用​​する。ping、のように ng-class="{'row-alt': $odd}"または、ng-if を使用して、最後の行を除くすべての行に区切り線をレンダリングします。 ng-if="!$last"人間が読みやすい行番号を表示するのは、 {{$index + 1}}インデックスはゼロベースなので、6つのプロパティはすべてコレクションが変更されるたびに自動的に再計算されるため、手動で再計算する必要はありません。

ng-repeatでよくあるエラーとその解決方法

ng-repeat の問題のほとんどは、値の重複、スコープの継承、またはディレクティブが間違った要素に設定されていることが原因です。以下の各症状は、それぞれ原因を示しています。

  • リピーター内での重複は許可されていません。 コレクションには重複した値が含まれています。追加 track by $index、またはそれ以上に、 track by 他に類を見ない物件。
  • リストには何も表示されません。 ビュー内の名前がスコープ上のプロパティと一致しません。コレクションを印刷するには、 {{TopicNames}} 到着を確認するため。
  • ラッパーを含め、すべての要素が繰り返されます。 ng-repeat はアイテムではなくコンテナに配置されました。 <li> or <tr>.
  • 入力内容を編集すると、間違った行が変更される。 リストは tracによって $index アイテムの並べ替えが行われます。 Trac代わりに、kを安定した識別子で表します。
  • ループ内の変更は永続化されません。 各イテレーションには独自の子スコープがあるため、プリミティブに書き込むとローカルコピーが作成されます。オブジェクトプロパティに書き込むには、 item.done.

よくあるご質問

はい、使用 ng-repeat="(key, value) in myObject"AngularJS はオブジェクトのキーを挿入順ではなくソート順で反復処理するため、順序が重要な場合は配列を使用する方が安全です。

式の中でフィルターを連鎖させる。 ng-repeat="t in TopicNames | filter:search | orderBy:'name'"元の配列は変更されず、レンダリングされる順序とサブセットのみが変更されます。

Yes. AI ツールはng-repeatをマッピングします *ngFor (NAIST) と track によって trackBy関数。Angularは組み込みのfilterとorderByパイプを意図的に削除したため、フィルターを注意深く確認してください。

AI ツールは、繰り返し式内の関数呼び出しを検出します。これは、ダイジェストごとに再実行されます。 tracDOMの完全な再構築を強制する句によってkが無効になっている。どちらもリストの表示が遅くなる一般的な原因である。

コメントフォームを使用してください。 ng-repeat-start (NAIST) と ng-repeat-endこれは、兄弟要素の範囲を繰り返すものです。これは、余分な div があるとマークアップが壊れてしまうテーブルでは重要です。

この投稿を要約すると次のようになります: