简而言之,我有一个用 ng-repeat 创建的 div 列表。
<div class="col-md-2-4" ng-repeat="card in cards">
<ul class="list-unstyled cs-tag-item-grp">
<li class="clearfix" ng-repeat="value in card.cardItem">
<div class="pull-left">
{{value.keys}}
</div>
</li>
</ul>
</div>
显示如下:Plunker http://plnkr.co/edit/mYxXW6abUxqX47Xe4Sek?p=preview
But is this possible to make them stacked something like this? :
我想我必须动态设置每个 div 的位置和 z 索引。但我不确定这是否可能,如果可以的话怎么办?如果有任何解决方案,那就太好了。
如果需要 jQuery/js 也可以。
我认为你可以使 div 相对于容器的位置绝对,然后使用ngStyle https://docs.angularjs.org/api/ng/directive/ngStyle像这样的指令:
<div class="col-md-2-4"
ng-repeat="card in cards.reverse()"
ng-style="{left: 2 * $index + 'px', top: 2 * $index + 'px', 'z-index': (cards.length - $index)}">
<ul class="list-unstyled cs-tag-item-grp">
<li class="clearfix" ng-repeat="value in card.cardItem">
<div class="pull-left">
{{value.keys}}
</div>
</li>
</ul>
</div>
所以这里的关键是ngStyle表达式:
ng-style="{left: 2 * $index + 'px', top: 2 * $index + 'px', 'z-index': (cards.length - $index)}"
尤其z-index
part.
Demo 1: http://plnkr.co/edit/aDlptsf9JY1nYhEJpaVu?p=preview http://plnkr.co/edit/aDlptsf9JY1nYhEJpaVu?p=preview
Demo 2:这是后续的演示question https://stackoverflow.com/questions/29564383/angularjs-click-button-to-show-next-previous-div带有漂亮的添加/删除卡片动画:)
http://plnkr.co/edit/tLVJrpqavKbHvKzMljNG?p=preview http://plnkr.co/edit/tLVJrpqavKbHvKzMljNG?p=preview
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)