AngularJS
ng-repeat

前書き

構文

• <element ng-repeat="expression"></element>
• <div ng-repeat="(key, value) in myObj">...</div>
• <div ng-repeat="variable in expression">...</div>

パラメーター

備考

オブジェクトのプロパティを反復する

<div ng-repeat="(key, value) in myObj"> ... </div>

例えば

<div ng-repeat="n in [42, 42, 43, 43]">
  {{n}}
</div>

トラッキングと重複

ngRepeatは、 $ watchCollectionを使用してコレクションの変更を検出します。変更が発生すると、 ngRepeatは対応するDOMへの変更を行います。

• アイテムが追加されると、テンプレートの新しいインスタンスがDOMに追加されます。
• アイテムが削除されると、テンプレートインスタンスがDOMから削除されます。
• アイテムの順序が変更されると、それぞれのテンプレートがDOM内で並べ替えられます。

重複

• track by 、重複する値を含んでいてもよい任意のリストのため。
• track byもリストが大きく変化スピードアップします。
• この場合にtrack byを使用しないと、エラーが発生します： [ngRepeat:dupes]

$scope.numbers = ['1','1','2','3','4'];

<ul>
  <li ng-repeat="n in numbers track by $index">
    {{n}}
  </li>
</ul>

ng-repeat-start + ng-repeat-end

AngularJS 1.2 ng-repeat 、 ng-repeat-startおよびng-repeat-end ng-repeat使用して複数の要素を処理します。

// table items
$scope.tableItems = [
    {
        row1: 'Item 1: Row 1',
        row2: 'Item 1: Row 2'
    },
    {
        row1: 'Item 2: Row 1',
        row2: 'Item 2: Row 2'
    }
];

// template
<table>
    <th>
        <td>Items</td>
    </th>
    <tr ng-repeat-start="item in tableItems">
        <td ng-bind="item.row1"></td>
    </tr>
    <tr ng-repeat-end>
        <td ng-bind="item.row2"></td>
    </tr>
</table>

出力：