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

Share Improve this question Follow asked Apr 8, 2015 at 19:21 RaihanRaihan 4,03133 gold badges2525 silver badges4141 bronze badges 2

• 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

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 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.