我一直在寻找这个问题的答案,但我只是没有足够的知识来找到解决方案,所以你是我最后的选择。
对于这个单页应用,我正在使用AngularJS和UiKit。 我有一个“发货”列表,静态显示时如下所示:
这是每个框的代码片段:
<div class="uk-width-large-1-5 uk-width-medium-1-3 uk-width-small-1-2 uk-text-center">
<div class="uk-panel uk-panel-box uk-container-center uk-panel-header uk-panel-box-primary">
<h4 class="uk-panel-title"><i class="uk-icon-truck"> Shipment 4</i></h4>
<i class="uk-icon-plus-square uk-icon-small uk-text-success" data-uk-tooltip title="Created on 27/09/2014"></i>
<i class="uk-icon-square uk-icon-small uk-text-warning" data-uk-tooltip title="Scanning in progres..."></i>
<i class="uk-icon-phone-square uk-icon-small uk-hidden" data-uk-tooltip title="Reference added on 31/09/2014"></i>
<i class="uk-icon-pencil-square uk-icon-small uk-hidden" data-uk-tooltip title="Invoice generated on 01/10/2014"></i>
<i class="uk-icon-external-link-square uk-icon-small uk-hidden" data-uk-tooltip title="Dispatched on 01/10/2014"></i>
</div>
</div>
然而,当我使用ng-repeat时,它渲染不正确,如下所示:
<div ng-repeat="shipment in shipments | orderBy:'createdAt':true" id="shipment.id" class="uk-width-large-1-5 uk-width-medium-1-3 uk-width-small-1-2 uk-text-center">
<div class="uk-panel uk-panel-box uk-container-center uk-panel-header">
<h4 class="uk-panel-title"><i class="uk-icon-truck"> {{ shipment.reference }}</i></h4>
<i class="uk-icon-plus-square uk-icon-small uk-text-success" data-uk-tooltip title="{{ shipment.createdAt }}"></i>
<i class="uk-icon-square uk-icon-small uk-text-warning" data-uk-tooltip title="Scanning in progres..."></i>
<i class="uk-icon-phone-square uk-icon-small uk-hidden" data-uk-tooltip title="Reference added on 31/09/2014"></i>
<i class="uk-icon-pencil-square uk-icon-small uk-hidden" data-uk-tooltip title="Invoice generated on 01/10/2014"></i>
<i class="uk-icon-external-link-square uk-icon-small uk-hidden" data-uk-tooltip title="Dispatched on 01/10/2014"></i>
</div>
</div>
因此,您可以看到两个片段非常相似,而第二个片段基于第一个片段。
希望有人能够帮助我。