CODEWITHSUNDEEP
javascriptjqueryangularjs
Raihan
Raihan

Reputation: 4001

angularjs How to create stack of divs with ng-repeat

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? : enter image description here

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.

Upvotes: 3

Views: 1499

Answers (4)

dfsq
dfsq

Reputation: 193261

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

Upvotes: 4

honerlawd
honerlawd

Reputation: 1509

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>

Upvotes: 2

m0meni
m0meni

Reputation: 16435

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.

Upvotes: 1

Dylan Watt
Dylan Watt

Reputation: 3387

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>

Upvotes: 2

Related Questions