Deepak3301086 Deepak3301086 - 1 month ago 8
AngularJS Question

Angular JS - How to close and start DIV out of ng-repeat

I have one div as row and 4 div as column. I want to close row div after 4 cloumn div.

<div class="row">
<div class="clo"></div>
<div class="clo"></div>
<div class="clo"></div>
<div class="clo"></div>
</div>
<div class="row">
<div class="clo"></div>
<div class="clo"></div>
<div class="clo"></div>
<div class="clo"></div>
</div>


Now in ng-repeart

<div class="row">
<div class="col" ng-repeat="x in values">
{{x.name}}
</div>
<div ng-if="$index % 4==0">
<div class="clearfix"></div>
</div>
<div class="row">
</div>


it's not work for me
I also try this as refrence but it only add clearfix div only. Not close the div class="row"> and not start aganin div class="row">

Answer

The clearfix solution assumes you are using Bootstrap CSS. If you're not then you'll have to grab the clearfix class from Bootstrap.css.

If you are including Bootstrap, and looking to use Bootstrap to do the layout then you can use:

  <div ng-init="a = [1,2,3,4,5,6,7,8]">  <!-- sample data !-->

    <div class="row">
      <div ng-repeat="product in a">
        <div class="clearfix" ng-if="$index % 4 == 0"></div>
        <div class="col-sm-3">
          <h2>{{a[$index]}}</h2>
        </div>
      </div>
    </div>

  </div>

Here's the demo: http://plnkr.co/edit/ibRsIfazxea2KpGmUg42?p=preview

Note I've reworked the answer from http://stackoverflow.com/a/32358013/1544886 to your requirements

Another option (based on http://stackoverflow.com/a/30259461/1544886)

<div ng-repeat="product in a" ng-if="$index % 4 == 0" class="row">
  <div class="clearfix" ng-if="$index % 4 == 0"></div>
  <div class="col-sm-3">{{a[$index]}}</div>
  <div class="col-sm-3" ng-if="a.length > ($index + 1)">{{a[$index + 1]}}</div>
  <div class="col-sm-3" ng-if="a.length > ($index + 2)">{{a[$index + 2]}}</div>
  <div class="col-sm-3" ng-if="a.length > ($index + 3)">{{a[$index + 3]}}</div>
</div>

You likely don't need the clearfix div, but as you have indicated in the comments that you want it as well, I have included it above.