CODEWITHSUNDEEP
htmlangularjs
Mohamed NAOUALI
Mohamed NAOUALI

Reputation: 2132

insert an element after a number of ng-repeat iteration

Is there a way to avoid such use of ng-repeat. To fix the issue ,I used two ng-repeat using the option limitTo to display each 3 element separately. What I want to do is ,to insert my elements and after each 3 elements ,So I add 

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

Below is my code:

<div class="row">
        <div class="col-md-10 col-md-offset-1">
            <div class="row l-b-margin">
                <div class="col-md-4" ng-repeat="name in Courses|limitTo:3">
                    <div class="well well-white">
                        <img alt="R Programming" class="center-block l-b-margin"
                            height="100" ng-src="{{name.logo}}" width="100" />
                        <h6 style="text-align: center; color: #516979; font-size: 21px">{{name.name}}</h6>
                        <p class="text-space l-b-margin">Write your first code here</p>
                        <a class="rounded-button cta-border-button center-block m-button"
                            href="courses/introduction-to-r">Start Course</a>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4" ng-repeat="name in Courses|limitTo:-3">
                    <div class="well well-white">
                        <img alt="Data Manipulation" class="center-block l-b-margin"
                            height="100" ng-src="{{name.logo}}" width="100" />
                        <h6 style="text-align: center; color: #516979; font-size: 21px">{{name.name}}</h6>
                        <p class="text-space l-b-margin">Write your first code here</p>
                        <a class="rounded-button cta-border-button center-block m-button"
                            href="courses/data-table-data-manipulation-r-tutorial">Start
                            Course</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

Upvotes: 2

Views: 1676

Answers (2)

Tomek Sułkowski
Tomek Sułkowski

Reputation: 7201

What you're seem to be doing is trying to prevent this situation from happening: (some blocks shifts to the next row if not all have equal heights) some blocks shifts if not all have equal heights

If that's the case you can (and should;) ) fix it via simple css: (just add a custom class to the div your iterating over)

.my-block:nth-child(3n+1) {
  clear: left;
}

Upvotes: 0

squiroid
squiroid

Reputation: 14037

The simple way to do is use ($index+1)%3==0 with ng-if and put the below element at the end of ng-repeat.

<div class="row" ng-if="($index+1)%3==0"> </div>

Plunker
Hope it helps :)

Upvotes: 1

Related Questions