我的html中有一个ng-repeat,它创造了大约750个div(我正在为我的产品制作标签),我已经设计了它们我希望它们看起来如何,我对此感到满意,但因为它们相当很大的打印预览看起来不像我的设计。
我想知道Angular中是否可以轻松遍历每个ng-repeat项并将它们保存为png?
以下是我的ng-repeat:
<div class="col-lg-4" ng-repeat="p in productcodes">
<div class="contact-box" style="padding:0px !important;height:370px;width:650px;">
<span ui-sref="profile">
<div class="col-lg-3" style="padding:0px">
<img alt="image" class="img m-t-xs img-responsive rotateimage" style="max-width:1000% !important;width:200%" ng-src="">
</div>
<div class="col-lg-2" style="padding:0px">
<div >
<h3 style="margin-top:45px;">Code:</h3>
<h3>Colour:</h3>
<h3>Item:</h3>
<h3>EN Cert:</h3>
<h3>Size GB:</h3>
<h3>Size SE:</h3>
<h3>Size EU:</h3>
<h3>Length:</h3>
</div>
</div>
<div class="col-lg-3" style="padding:0px">
<h3 style="margin-top:45px;"><strong>{{p.pcode}}</strong></h3>
<strong>
<h3>{{p.Colour}}</h3>
</strong>
<h3>
{{p.shortdescription}}</h4>
<h3>N/A</h3>
<strong>
<h3>{{p.Size}}</h3>
</strong>
<h3>C62</h3>
<h3>3XL+</h3>
<strong>
<h3>{{getsize(p.SizeCode)}}</h3>
</strong>
</div>
<div class="col-lg-4 col-md-12 col-sm-12" style="padding:0px">
<img alt="image" class="img-circle m-t-xs img-responsive" style="margin-top:60px;width:200%;" src=".{{p.localimg}}">
</div>
<div class="clearfix"></div>
</span>
</div>
</div>
答案 0 :(得分:1)
我想知道Angular中是否可以轻松迭代 每个ng-repeat项目并将它们保存为png?
没有
另存为png
在哪里?您可以将它们存储在服务器端或您的comp上。它与Angular无关。例如,如果您使用cloudinary作为图片存储空间,则可以通过更改网址transform image resolutions进行预览:
此外,一次显示750 images
不好的做法,你会杀了你的网页。请记住,在2K的观察者之后,网络视图的性能会降低。
我相信如果你有ng-repeat
项的固定高度,我会使用无限滚动。例如,看看Google Material virtual Repeat方法。
如果您的图片预览很小,则可以转换image to base64,这样可以免于调用750个HTTP请求