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

您可以在$index构造中使用Angular的1.x版本内置变量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>

如何在html中动态创建新行

1 个答案: