vandi vandi - 6 days ago 5
AngularJS Question

add condition additional div inside ng-repeat

hello guys is there any way to add additional div on ng-repeat.

<div class="row">
<div class=" thumbnail-services col-xl-3 col-lg-4 col-md-4 col-sm-6 col-xs-6" ng-repeat="service in services">
<figure class="figure">
<img src="http://placehold.it/350x350" class="figure-img img-fluid rounded" alt="{{service.name}}">
<figcaption class="figure-caption">
<h3>{{service.name}} <span> {{service.age}}</span></h3>
</figcaption>
</figure>
</div>
</div>


i want to add
<div class="clearfix">
everythime its loop 2 times

like this

<div class="row">
<div class=" thumbnail-services col-xl-3 col-lg-4 col-md-4 col-sm-6 col-xs-6" ng-repeat="service in services">
<figure class="figure">
<img src="http://placehold.it/350x350" class="figure-img img-fluid rounded" alt="{{service.name}}">
<figcaption class="figure-caption">
<h3>{{service.name}} <span> {{service.age}}</span></h3>
</figcaption>
</figure>
</div>
<div ng-if="$index % 2 == 0">
<div class="clearfix"></div>
</div>
</div>


so to sum it up after loop 2 times just under closed div for cols it will add a new div class clearfix. is it possible?

Answer

Your ng-if is outside the ng-repeat. Update based on your comment, add another div that will wrap the clearfix div and service div.

<div class="row">
      <div ng-repeat="service in services">
        <div class=" thumbnail-services col-xl-3 col-lg-4 col-md-4 col-sm-6 col-xs-6">
            <figure class="figure">
                  <img src="http://placehold.it/350x350" class="figure-img img-fluid rounded" alt="{{service.name}}">
                  <figcaption class="figure-caption">
                      <h3>{{service.name}} <span> {{service.age}}</span></h3>
                  </figcaption>
            </figure>
        </div>
        <div ng-if="$index % 2 == 0">
              <div class="clearfix"></div>
        </div>
     </div>
</div>
Comments