问题描述:

In short I have a list of div created with ng-repeat.

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

Which display something like this: Plunker

But is this possible to make them stacked something like this? :

I guess I have to dynamically set the positions and z-index for each div. But I'm not sure if this can be even possible and if so then how? This will be great if there is any solution for this.

If need jQuery/js it will be fine too.

网友答案:

I think you can make divs position absolute relatively to container and then use ngStyle directive like this:

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

So the key here is ngStyle expression:

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

especially z-index part.

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

Demo 2: Here is a demo from follow-up question with nice add/remove cards animations :)

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

网友答案:

The following would repeat across a list of cards, increase the z-index,top, and left all by 1 for each iteration, using $index as the reference for place of the current cards. Depending on how your cards need to be laid out, you may needs to do some cards.length - $index stuff to reverse it.

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

You can use the ng-style directive and the $index variable in conjuction:

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

Which will make the z-index increment by 1 as you go down starting from 0.

网友答案:

Something along these lines should do what you want.

<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>
相关阅读:
Top