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

Question

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 working for me I also tried this as refrence but it only add clearfix div only. Not close the div class="row"> and not start again div class="row">

score 2 · Accepted Answer · edited May 23 '17 at 12:19

2

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 https://stackoverflow.com/a/32358013/1544886 to your requirements

Another option (based on https://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.

edited May 23 '17 at 12:19

Community

1
1

answered Oct 26 '16 at 12:43

K Scandrett

16,390
4
40
65

`{{a[$index]}}` could be replaced with `{{product}}` – K Scandrett Oct 26 '16 at 12:48
And if you prefer to do it exactly like you have in your example you can use this answer http://stackoverflow.com/a/30259461/1544886 – K Scandrett Oct 26 '16 at 13:19
@K scandrett, Thanks for replying. But i try both solution and not getting exactly what i need, either clearfix div not come or row div not close after 4 col div – Deepak3301086 Oct 27 '16 at 04:06
I can't able to attach image to show you what i got after following your example. Can you explain me where your row div close after 4 entries and again start. – Deepak3301086 Oct 27 '16 at 04:18
I'm surprised the link in the comments didn't work for you. I've just updated my plnkr demo to include that method also. Looking at the html it surrounds every group of 4 cols with a row div – K Scandrett Oct 27 '16 at 04:19
If you want to post an image you could add it to your question – K Scandrett Oct 27 '16 at 04:24
@K Scandrett, I try second mothod also but in this i can't see the clearfix div. row div fine in it – Deepak3301086 Oct 27 '16 at 04:26
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/126783/discussion-between-k-scandrett-and-deepak3301086). – K Scandrett Oct 27 '16 at 04:26

score 1 · Answer 2 · answered Oct 26 '16 at 12:14

Change it below like this: $index is available inside your ng-repeat and not outside.

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

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

2 Answers2