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