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

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

{{value.keys}}

显示如下内容：

但这有可能让它们像这样堆叠起来吗

我想我必须为每个div动态设置位置和z索引。但我不确定这是否可能，如果可能，那么如何设置？这将是伟大的，如果有任何解决方案

---

如果需要jQuery/js，也可以

您可以联合使用

ng style

指令和

$index

变量：

<div class="col-md-2-4" ng-repeat="card in cards" ng-style="{'z-index': $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>

{{value.keys}}

---

这将使z索引从0开始向下增加1。

以下内容将在卡片列表中重复，在每次迭代中，将z索引、top和left all增加1，使用$index作为当前卡片位置的参考。根据您的卡需要如何布局，您可能需要执行一些

cards.length-$index

操作来反转它

<div 
    ng-repeat="card in cards" 
    style="position:absolute" 
    ng-style="{'z-index':$index; 'top':$index+'px';'left':$index+'px'}">
</div>

---

我认为可以将div位置设置为相对于容器的绝对位置，然后使用如下指令：

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

特别是

z-index

部分

演示1:

演示2:下面是一个后续演示，其中包含漂亮的添加/删除卡动画：）

---

按照这些思路做的事情应该可以满足您的需求

{{value.keys}}

哪一个在上面：第一个还是最后一个？第一个应该在上面：）但它不是李的，应该是它的内容我不好。这个概念仍然是一样的。谢谢你的解决方案：）你能在这方面帮我吗？这是您的解决方案的扩展版本。您认为（链接上方）可行吗？

ng-style="{left: 2 * $index + 'px', top: 2 * $index + 'px', 'z-index': (cards.length - $index)}"