如何在html中动态创建新行

Question

我正在创建一个网站，我正在使用Flipkart API获取产品列表。但是当产品在网站上展示时，它们不会显示在格式良好的视图中，因为我已经为它创建了设计。我想每行只展示4个产品，但现在我不知道如何做到这一点，请帮助我。

<div class="container-fluid">   
    <div class="row">
        <div class="column" ng-repeat="data in flipkart">
            <div class="cards card1">
                <a href="" ng-click="userSearchDetails(data.productBaseInfoV1.title)">
                <img src="{{data.productBaseInfoV1.imageUrls.200x200}}" class="img-responsive" style="padding-top: 3px;">
                <strong> <p>Rs {{data.productBaseInfoV1.flipkartSpecialPrice.amount}} </p></strong> </a>
                <h6><strong>{{data.productBaseInfoV1.title}}</strong></h6>
            </div>
        </div>
    </div>
</div>

CSS

<style>
div {
    margin: 0px;
}
.body-class {
    background-color:#FAFAFA;
}
.row {
    content: "";
    display: table;
    overflow:hidden;
    clear: both; 
    margin-left:  45px;
}
.column {
    float: left;
    width: 20%;
    max-height: 50%;
    margin:10px;
    padding-right: 15px;
}

h6 {
    padding:3px;
    overflow: hidden;
}
</style>

Answer 1

您可以在ng-repeat构造中使用Angular 1.x版本的内置变量$index来获取当前索引。

为了限制每行只有4张卡，您可以执行以下操作：

<div class="container-fluid">   
    <div class="row">
        <div class="column" ng-repeat="data in flipkart">
            <div class="cards card1">
                <a href="" ng-click="userSearchDetails(data.productBaseInfoV1.title)">
                <img src="{{data.productBaseInfoV1.imageUrls.200x200}}" class="img-responsive" style="padding-top: 3px;">
                <strong> <p>Rs {{data.productBaseInfoV1.flipkartSpecialPrice.amount}} </p></strong> </a>
                <h6><strong>{{data.productBaseInfoV1.title}}</strong></h6>
            </div>
            <!-- Add a conditional <br /> tag after every fourth product card -->
            <br ng-if="($index+1)%4===0" />
        </div>
    </div>
</div>