30127

angularjs How to create stack of divs with ng-repeat

Question:

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: <strong><a href="http://plnkr.co/edit/mYxXW6abUxqX47Xe4Sek?p=preview" rel="nofollow">Plunker</a></strong>

But is this possible to make them stacked something like this? : <img alt="enter image description here" class="b-lazy" data-src="https://i.stack.imgur.com/uML18.png" data-original="https://i.stack.imgur.com/uML18.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" />

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.

Answer1:

I think you can make divs position absolute relatively to container and then use <a href="https://docs.angularjs.org/api/ng/directive/ngStyle" rel="nofollow">ngStyle</a> 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.

<strong>Demo 1:</strong> <a href="http://plnkr.co/edit/aDlptsf9JY1nYhEJpaVu?p=preview" rel="nofollow">http://plnkr.co/edit/aDlptsf9JY1nYhEJpaVu?p=preview</a>

<strong>Demo 2:</strong> Here is a demo from follow-up <a href="https://stackoverflow.com/questions/29564383/angularjs-click-button-to-show-next-previous-div" rel="nofollow">question</a> with nice add/remove cards animations :)

<a href="http://plnkr.co/edit/tLVJrpqavKbHvKzMljNG?p=preview" rel="nofollow">http://plnkr.co/edit/tLVJrpqavKbHvKzMljNG?p=preview</a>

Answer2:

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>

Answer3:

Something along these lines should do what you want.

<pre class="snippet-code-html lang-html prettyprint-override"><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>

Answer4:

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.

Recommend

  • Creating a simple, full-width, infinite carousel with jQuery
  • How to render maps within ng-hide divs using ngMap without getting a gray rectangle
  • Bootstrap - Scrollspy scrolling skipping second to last section
  • Angular app reading from a nested json structure
  • How do I add margin between divs that are set to display table-cell?
  • Can you actually link constraints to utterly different view controllers?
  • Angular2: Cannot subscribe to custom events emitted from shared service
  • Incorrect behaviour when selecting chips in Angular Material
  • show popover on input validation in angularjs
  • How can I make a 100% stacked chart with nvd3?
  • conditions for accessors in Coldfusion ORM
  • Enumerating Controls on a Form
  • netsh acl setting (need alternative method - registry settings?)
  • Basic many-to-many left join query
  • Why isn't obj.style.left = “200px”; working in this code?
  • how to set variables in a php include file?
  • jQuery: add elements until a particular height is reached
  • Javascript, Regex - I need to grab each section of a string contained in brackets
  • Floated image with variable width and heading with background image
  • List images(01.png) and descriptions(01.txt) from directory
  • Remove final comma from string in vb.net
  • how to display data from 1st point on words on y axis for line chart in d3.js
  • Blackberry - Custom EditField Cursor
  • preg_replace Double Spaces to tab (\\t) at the beginning of a line
  • Listbox within Listbox and scrolling trouble in Windows Phone 7 Silverlight
  • Disable Enter in editText android
  • How to use an array of arrays with array_map(…) in PHP?
  • Recording logins for password protected directories
  • Initializer list vs. initialization method
  • Nant, Vault & Windows Integrated Authentication
  • How to check if every primary key value is being referenced as foreign key in another table
  • Javascript + PHP Encryption with pidCrypt
  • ActionScript 2 vs ActionScript 3 performance
  • To display the title for the current loaction in map in iphone
  • How do I rollback to a specific git commit
  • Traverse Array and Display in markup
  • VB.net deserialize, JSON Conversion from type 'Dictionary(Of String,Object)' to type '
  • python regex in pyparsing
  • How to set the response of a form post action to a iframe source?
  • Exception on Android 4.0 `android.os.StrictMode$AndroidBlockGuardPolicy.onNetwork(StrictMode)`