また、 AngularJSng-repeat
の新しい機能、つまり特別な繰り返しの開始点と終了点についても言及したいと思います。この機能は、単一の親 HTML 要素ではなく、一連の HTML 要素を繰り返すために追加されました。
リピーターの開始点と終了点を使用するには、それぞれng-repeat-start
とng-repeat-end
ディレクティブを使用して定義する必要があります。
このng-repeat-start
ディレクティブは、ディレクティブと非常によく似た働きをしng-repeat
ます。違いは、すべての HTML 要素 (それが定義されているタグを含む)ng-repeat-end
が配置されている終了 HTML タグ ( のタグを含む) まで繰り返されることng-repeat-end
です。
サンプルコード (コントローラーから):
// ...
$scope.users = {};
$scope.users["182982"] = {name:"John", age: 30};
$scope.users["198784"] = {name:"Antonio", age: 32};
$scope.users["119827"] = {name:"Stephan", age: 18};
// ...
サンプル HTML テンプレート:
<div ng-repeat-start="(id, user) in users">
==== User details ====
</div>
<div>
<span>{{$index+1}}. </span>
<strong>{{id}} </strong>
<span class="name">{{user.name}} </span>
<span class="age">({{user.age}})</span>
</div>
<div ng-if="!$first">
<img src="/some_image.jpg" alt="some img" title="some img" />
</div>
<div ng-repeat-end>
======================
</div>
出力は次のようになります (HTML スタイルによって異なります)。
==== User details ====
1. 119827 Stephan (18)
======================
==== User details ====
2. 182982 John (30)
[sample image goes here]
======================
==== User details ====
3. 198784 Antonio (32)
[sample image goes here]
======================
ご覧のとおり、ng-repeat-start
はすべての HTML 要素を繰り返します ( の要素を含むng-repeat-start
)。すべてのng-repeat
特別なプロパティ (この場合は$first
と$index
) も期待どおりに機能します。