Angularjs How To Create Stack Of Divs With Ng-repeat

Question

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

Solution 1:
I think you can make divs position absolute relatively to container and then use ngStyle directive like this:
```
<divclass="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)}"><ulclass="list-unstyled cs-tag-item-grp"><liclass="clearfix"ng-repeat="value in card.cardItem"><divclass="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
Solution 2:
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.
Baca Juga
```
<div 
    ng-repeat="card in cards" 
    style="position:absolute" 
    ng-style="{'z-index':$index; 'top':$index+'px';'left':$index+'px'}">
</div>
```
Solution 3:
Something along these lines should do what you want.
```
<divclass="col-md-2-4"ng-repeat="card in cards"style="position: absolute; top:{{$index}}px; left:{{$index}}px; z-index: -{{$index}};"><ulclass="list-unstyled cs-tag-item-grp"><liclass="clearfix"ng-repeat="value in card.cardItem"><divclass="pull-left">
            {{value.keys}}
          </div></li></ul></div>
```
Solution 4:
You can use the ng-style directive and the $index variable in conjuction:
```
<divclass="col-md-2-4"ng-repeat="card in cards"ng-style="{'z-index': $index}"><ulclass="list-unstyled cs-tag-item-grp"><liclass="clearfix"ng-repeat="value in card.cardItem"><divclass="pull-left">
            {{value.keys}}
          </div></li></ul></div>
```
Which will make the z-index increment by 1 as you go down starting from 0.

JavaScript Exercises

Angularjs How To Create Stack Of Divs With Ng-repeat

Solution 1:

Solution 2:

Solution 3:

Solution 4:

Post a Comment for "Angularjs How To Create Stack Of Divs With Ng-repeat"