ng-repeat后添加横幅

时间:2018-05-23 05:12:08

标签: angularjs ionic-framework angularjs-ng-repeat

我已经查看了几乎所有关于此问题的解决方案,但我无法让我的代码工作。我不想在3 ng-repeats之后放一个横幅

<div class="row products-row" ng-init="onInit()">
  <div class="col col-34 fashion-product-container" ng-repeat="product in results = fashionProducts | FashionFilter:params | orderBy:sortby_obj.propertyName:sortby_obj.reverse as fashionResults">
    <div class="list card">
      <div class="item item-image product-image-wrapper">
          <pre-img ratio="_3_4">
            <img class="product-image" ng-src="{{ product.image }}" spinner-on-load>
          </pre-img>
      </div>
      <div class="item item-body product-description-wrapper">
        <h5 class="product-title">
            {{ product.name }}
        </h5>
        <p class="product-description">
          <b class="actual-price bold-price">${{product.price_sale}}</b>
          <span class="previous-price bold-price" ng-show="product.price != '0'">${{product.price}}</span>
        </p>
      </div>
    </div>
  </div>
  <div class="col-md-12" id="Banner" ng-if="$index==3">Banner</div>

</div>

2 个答案:

答案 0 :(得分:0)

使用$index

喜欢

<div id="banner" ng-show="$index == 3"></div>

现在这将显示横幅div,它是ng-repeat的第三个元素。

您的<div class="col-md-12" id="Banner" ng-if="$index==3">Banner</div>不在包含<div>标记的ng-repeat之内。由于$index未定义。

将它放在ng-repeat的div中,它会起作用。

答案 1 :(得分:0)

试试这个: -

<div class="row products-row" ng-init="onInit()">
  <div ng-repeat="product in results = fashionProducts | FashionFilter:params | orderBy:sortby_obj.propertyName:sortby_obj.reverse as fashionResults">
    <div class="col col-34 fashion-product-container">
      <div class="list card">
        <div class="item item-image product-image-wrapper">
            <pre-img ratio="_3_4">
              <img class="product-image" ng-src="{{ product.image }}" spinner-on-load>
            </pre-img>
        </div>
        <div class="item item-body product-description-wrapper">
          <h5 class="product-title">
              {{ product.name }}
          </h5>
          <p class="product-description">
            <b class="actual-price bold-price">${{product.price_sale}}</b>
            <span class="previous-price bold-price" ng-show="product.price != '0'">${{product.price}}</span>
          </p>
        </div>
      </div>
    </div>
    <div class="col-md-12" id="Banner" ng-show="$index==3">Banner</div>
  </div>
</div>