javascript - ng-Repeat 堆叠卡片

Question

我使用 z-index 将三张卡片相互对齐。我正在尝试找到一种方法，我可以使用 ng -Repeat 复制卡片，所以它看起来像这样

第一秒 堆栈堆栈 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>

如果有人对我如何在这里使用 ng-Repeat 有任何想法，我们将不胜感激。

Answer 1

ng-repeat 遍历一个数组，所以你应该首先构建一个数据模型/对象来保存你想要显示的所有卡片信息。此外，您还可以将所有 css 样式添加到对象中。

示例对象:

{ 
    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%"
            }
        }
    ]
}

所以你的每张卡片都会有一个这样的对象，你会像这样将它们组装成一个数组......

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

然后实现 ng-repeat 看起来像这样:

<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>