i have 3 cards aligned on top of each other using z-index. trying find way can replicate cards using ng -repeat looks this
first second stack stack of 3 cards of 3 cards
#edit_card{ position: absolute; z-index:-150; width:340px; height:450px; background-color:ghostwhite; } #learn_more { position: absolute; z-index:-100; width:340px; height:450px; background-color:ghostwhite; } #main_card { position:absolute; z-index:50; width:340px; height:450px; background-color:ghostwhite; }<div class="md-padding" layout="row" layout-wrap > <md-card id="edit_card" > <md-card-content ng-class="" style="width:100%;height:100%"> <img src="" width="45px" height="45px" class="md-card-image" alt="image caption"> <div class="edit_block" layout="row" layout-align="center" style="width:100%;height:30%;margin-bottom:2.75%;"> <md-button></md-button> </div> <img src="" width="45px" height="45px" class="md-card-image" alt="image caption"> <div class="edit_block" layout="row" layout-align="center" style="width:100%;height:30%;margin-bottom:2.75%;"> <md-button>edit application</md-button> </div> <img src="" width="45px" height="45px" class="md-card-image" alt="image caption"> <div class="edit_block" layout="row" layout-align="center" style="width:100%;height:30%;margin-bottom:2.75%;"> <md-button>learn more</md-button> </div> </md-card-content> </md-card> <md-card id="learn_more" > <md-card-content ng-class="" style="width:100%;height:100%"> learn more card </md-card-content> </md-card> <md-card id="main_card" > <md-card-content ng-class="" style="width:100%;height:100%"> <button ng-click="changez()">change z</button> </md-card-content> </md-card> </div>if 1 has ideas on how can use ng-repeat here appreciated.
ng-repeat iterates on array, should first build data model/object holds of card information display. additionally may add of css styles object well.
sample object:
{ name:"edit_card", content: [ { buttontext: "edit application", style: { width: "100%", height: "30%", "margin-bottom": "2.75%" } }, { buttontext: "learn more", style: { width: "100%", height: "30%", "margin-bottom": "2.75%" } } ] } so have object each of cards , assemble them array so...
$scope.arrayofcards = [ { name: "edit_card" ... }, { name: "learn_more" ... }, { name: "main_card" ... } ]; then implement ng-repeat this:
<div class="md-padding" layout="row" layout-wrap > <md-card ng-repeat="card in arrayofcards" id="{{card.name}}"> <md-card-content ng-class="" style="width:100%;height:100%"> // optionally can iterate through content array example above created. <div ng-repeat="content in card"> <img src="" width="45px" height="45px" class="md-card-image" alt="image caption"> <div class="edit_block" layout="row" layout-align="center" ng-style="content.style"> <md-button>{{content.buttontext}}</md-button> </div> </div> </md-card-content> </md-card> 