Raghava Manvitha Reddy Raghava Manvitha Reddy - 5 months ago 81
HTML Question

ng-Repeat on stacked up cards

I have three cards aligned on top of each other by using z-index. I am trying to find a way i can replicate the cards by using ng -Repeat so it looks like 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 any one has any ideas on how i can use ng-Repeat here it would be much appreciated.

Answer

ng-repeat iterates over an array, so you should first build a data model/object that holds all of the card information you would like to display. Additionally you may add all of your css styles to the object as 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 you will have an object like this for each of your cards and you will assemble them into an array like so...

$scope.arrayOfCards = [
    { name: "edit_card" ... },
    { name: "learn_more" ... },
    { name: "main_card" ... }
];

Then to implement the ng-repeat it would look something like 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 you can iterate through the content array from the example above I 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>
Comments