[英]ng-repeat on inner elements
I am building an application that has assets and each of these assets has a number of notes. 我正在构建一个具有资产的应用程序,每个资产都有很多注释。 Now in my application i am looping my assets and in there i am looping my notes. 现在,在我的应用程序中,我正在循环我的资产,并且在那里我正在循环我的笔记。 like so 像这样
<div class="asset-image-container" ng-repeat="asset in assets" data-asset-key="{{ asset.key }}">
<img class="asset-page" src="{{asset.large_asset_path}}"/>
<div ng-repeat="note in asset.notes" class="note-pin" data-note-index="{{ note.index }}" data-asset-key="{{ asset.key }}" style="left: {{ note.x }}%; top: {{ note.y }}%;">
<span class="note-index">{{ note.index }}</span>
<img src="/img/note.png">
</div>
On this same page i would also like to show all my notes in a list without the assets. 在同一页面上,我还想在没有资产的列表中显示所有笔记。 so i need 2 ng-repeats but the first one should be without an html element. 所以我需要2 ng-repeats,但第一个应该没有html元素。 Any idea ho i might manage this? 有什么办法可以解决吗?
Update: 更新:
i have added my model to make it more clear: 我添加了我的模型以使其更加清晰:
[
{
"id":69,
"upload_id":16,
"name":"preview-1",
"key":"l476IU94c9YhyvUByZnnr162bbO3uKs3bcWVXSpG",
"created_at":"2014-11-25 20:41:30",
"updated_at":"2014-11-25 20:41:30",
"deleted_at":null,
"large_asset_path":"\/uploads\/vtbwCn1ISkRYCewaYtQE9qwDdXmpWcUohlcQAnzc\/large\/preview-1.jpg",
"small_asset_path":"\/uploads\/vtbwCn1ISkRYCewaYtQE9qwDdXmpWcUohlcQAnzc\/small\/preview-1.jpg",
"notes":[
{
"id":13,
"index":13,
"key":"oidSFwkyYhPmA9TK0XCLU4Jg52nJHA2E9CIv59Lw",
"upload_id":16,
"asset_id":69,
"from_id":1,
"message":"\n ",
"created_at":"2014-12-07 08:46:58",
"updated_at":"2014-12-07 08:47:52",
"deleted_at":null,
"x":"71.67796920821115",
"y":"8.503401360544217",
"parameters":[
{
"id":25,
"note_id":13,
"name":"x",
"value":"71.67796920821115",
"created_at":"2014-12-07 08:46:58",
"updated_at":"2014-12-07 08:47:51",
"deleted_at":null
},
{
"id":26,
"note_id":13,
"name":"y",
"value":"8.503401360544217",
"created_at":"2014-12-07 08:46:58",
"updated_at":"2014-12-07 08:46:58",
"deleted_at":null
}
]
},
{
"id":63,
"index":50,
"key":"CRZGM6XbRJzgWyq4Vmt1BUuRnOlBCnNQs4lHGRu8",
"upload_id":16,
"asset_id":69,
"from_id":1,
"message":null,
"created_at":"2014-12-07 08:49:21",
"updated_at":"2014-12-07 08:49:21",
"deleted_at":null,
"x":"0",
"y":"0",
"parameters":[
{
"id":125,
"note_id":63,
"name":"x",
"value":"0",
"created_at":"2014-12-07 08:49:21",
"updated_at":"2014-12-07 08:49:21",
"deleted_at":null
},
{
"id":126,
"note_id":63,
"name":"y",
"value":"0",
"created_at":"2014-12-07 08:49:21",
"updated_at":"2014-12-07 08:49:21",
"deleted_at":null
}
]
}
],
"upload":{
"id":16,
"key":"vtbwCn1ISkRYCewaYtQE9qwDdXmpWcUohlcQAnzc",
"name":"annots.pdf",
"type":"application\/pdf",
"size":393314,
"status_id":1,
"created_at":"2014-11-25 20:41:29",
"updated_at":"2014-11-25 20:41:29",
"deleted_at":null
}
},
...
]
As Phill stated, I suggest you to create a list of notes and then iterate over them, something like the following: 正如Phill所说,我建议您创建一个笔记列表,然后遍历它们,如下所示:
for (var i = 0, asset; asset = $scope.assets[i]; i++) {
$scope.notes = $scope.notes || [];
$scope.notes.concat(asset.notes);
}
Then in the view: 然后在视图中:
<div ng-repeat="note in notes">
{{note}}
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.