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>

哪个显示如下: Plunker

但这有可能使它们堆积成这样吗？ :

我想我必须为每个div动态设置位置和z-index。但是我不确定这是否可能，如果可以，那又如何呢？如果有任何解决方案，这将很棒。

如果需要jQuery / js，也可以。

最佳答案

我认为您可以使divs相对于容器绝对位置，然后使用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