gpt4 book ai didi

javascript - angularjs 如何使用 ng-repeat 创建 div 堆栈

转载 作者:塔克拉玛干 更新时间:2023-11-02 22:14:23 26 4
gpt4 key购买 nike

简而言之,我有一个用 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

但这有可能让他们像这样堆叠起来吗? : enter image description here

我想我必须为每个 div 动态设置位置和 z-index。但我不确定这是否可能,如果可能,那又如何呢?如果对此有任何解决方案,那就太好了。

如果需要 jQuery/js 也可以。

最佳答案

我认为你可以使 div 相对于容器绝对定位,然后使用 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 部分。

演示 1: http://plnkr.co/edit/aDlptsf9JY1nYhEJpaVu?p=preview

演示 2:这是来自后续 question 的演示带有漂亮的添加/删除卡片动画:)

http://plnkr.co/edit/tLVJrpqavKbHvKzMljNG?p=preview

关于javascript - angularjs 如何使用 ng-repeat 创建 div 堆栈,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29523533/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com