如何在html中动态创建新行答案

【问题标题】：How to create new row dynamically in html如何在html中动态创建新行
【发布时间】：2018-09-29 14:19:20
【问题描述】：

我正在创建一个网站，我使用 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>

【问题讨论】：

请查看此链接它可能对您有所帮助：stackoverflow.com/questions/34906145/…
不，这不是我想要的。我是从 Flipkart 的服务器动态获取元素，我没有手动添加它。
Form Flipkart 的服务器元素来自哪种格式？？
图片和一些文字。图片尺寸为 200*200

标签： html css angular dynamic

【解决方案1】：

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

为了限制每行只有 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>

【讨论】：