AngularJS：ng-repeat循环3次后插入Banner功能故障排查

Hey there, let's figure out why your banner isn't showing up where you want it to.

Looking at your code, the main issue is how you're trying to insert the banner alongside the ng-repeat elements. Right now, your banner div is a sibling to the repeated product containers, but the $index check isn't working as expected because of how AngularJS renders ng-repeat items, plus your layout classes might be causing alignment issues.

Here's how to fix it step by step:

1. Use ng-repeat-start and ng-repeat-end for multi-element loops #

AngularJS's ng-repeat-start and ng-repeat-end let you include multiple elements in each iteration of the loop, which is perfect for inserting a banner after your first 3 products (or every 3 products, if that's what you want).

2. Adjust the index condition correctly #

Since $index starts at 0, the 3rd product will have an index of 2. If you want the banner to show up right after the 3rd product, use ng-if="$index === 2". If you want it to repeat after every 3 products, use ng-if="($index + 1) % 3 === 0" (this checks if the current item count is a multiple of 3).

3. Fix the layout class for the banner #

Your product containers use Ionic's col col-34 classes, but the banner uses col-md-12 (Bootstrap syntax). Swap that for col col-100 to make the banner take up the full row in Ionic's grid system, so it doesn't get stuck next to product cards.

Here's the revised code:

<div class="row products-row" ng-init="onInit()">
  <!-- Start the repeat with ng-repeat-start -->
  <div class="col col-34 fashion-product-container" 
       ng-repeat-start="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>

  <!-- Insert the banner after the 3rd product (index 2) -->
  <div class="col col-100" id="Banner" ng-if="$index === 2">
    Banner
  </div>

  <!-- End the repeat with ng-repeat-end -->
  <div ng-repeat-end></div>
</div>

Quick Notes: #

• If you want a banner after every 3 products instead of just the first set, change the ng-if to ng-if="($index + 1) % 3 === 0".
• Double-check that your FashionFilter and sorting logic are working correctly—if they're modifying the product list, the index count might be off.
• Make sure the col col-100 class matches your Ionic version (it's standard for most versions, but adjust if needed).

This should get your banner showing up exactly where you want it after the 3rd product loop!

内容的提问来源于stack exchange，提问作者Steven M