Question

简而言之，我有一个用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，它也会没问题。

Answer 1

我认为你可以让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

Answer 2

以下内容将在卡片列表中重复，每次迭代都会增加z-index，top和left all，使用$ 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>

Answer 3

这些方面应该做你想做的事。

<div class="col-md-2-4" ng-repeat="card in cards" style="position: absolute; top:{{$index}}px; left:{{$index}}px; 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>

Answer 4

您可以结合使用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>

当你从0开始下降时，这将使z-index增加1。

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

4 个答案: