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.

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.

• javascript
• jquery
• angularjs

• Which one is on top: the first or last? – dfsq Commented Apr 8, 2015 at 19:25
• First one should go on the top :) – Raihan Commented Apr 8, 2015 at 19:26

4 Answers 4

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>

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>

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.