繁体   English   中英

对内部元素进行ng-repeat

[英]ng-repeat on inner elements

我正在构建一个具有资产的应用程序,每个资产都有很多注释。 现在,在我的应用程序中,我正在循环我的资产,并且在那里我正在循环我的笔记。 像这样

<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>

在同一页面上,我还想在没有资产的列表中显示所有笔记。 所以我需要2 ng-repeats,但第一个应该没有html元素。 有什么办法可以解决吗?

更新:

我添加了我的模型以使其更加清晰:

[  
   {  
      "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
      }
   },
   ...
]

正如Phill所说,我建议您创建一个笔记列表,然后遍历它们,如下所示:

for (var i = 0, asset; asset = $scope.assets[i]; i++) {
  $scope.notes = $scope.notes || [];
  $scope.notes.concat(asset.notes);
}

然后在视图中:

<div ng-repeat="note in notes">
   {{note}}
</div>

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM