Question

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

第一秒堆栈栈 3张卡的3张卡

  #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有任何想法 - 请在这里重复一遍，我们将不胜感激。

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>

ng-重叠堆叠卡片

1 个答案: