在ng-repeat中添加条件附加div

时间:2016-11-28 22:03:07

标签: javascript jquery angularjs

大家好,有没有办法在ng-repeat上添加额外的div。

<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>

我想将<div class="clearfix">每隔一天添加2次

像这样

<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>

所以要在cols的闭合div下循环2次之后总结它,它将添加一个新的div类clearfix。有可能吗?

1 个答案:

答案 0 :(得分:1)

您的ng-if位于ng-repeat之外。根据您的评论更新,添加另一个将包装clearfix div和服务div的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>