4

If are m items (26) and I want to display n (3) in a row, how to use ng-repeat for creating this view. How to include clear both after 3 elements The below example either creating all elements in same row or are coming 1 in each row.

In below example I added m = 5,

<div flex="70" flex-offset="15" ng-init="names=['adventure','art','backpacker', 'historic','beach']">
        <h3 style="padding:2em">Welcome {{user.name}}</h3>
        <div flex-container="row" flex-gutter="24"   >
            <div flex-item ng-repeat="x in names" flex="33">
                <div class="card" >
                    <div class="card__img card__img--top">
                        <img src="/images/placeholder/{{x}}.png" width="100%">
                        <span class="fs-headline tc-white-1 display-block">{{x}}</span>
                    </div>

                    <div class="p+">
                        <span class="fs-subhead tc-black-2 display-block"><b>{{x}}</b></span>

                        <div class="paragraph fs-body-1">
                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tristique orci a lacinia malesuada.
                            </p>
                        </div>
                    </div>

                    <div class="card__actions">
                        <div class="switch">
                            <input type="checkbox" id="switch1" class="switch__input">
                            <label for="switch1" class="switch__label">Ac</label>
                        </div>
                    </div>
                </div>

            </div>


            </div>
        </div>
    </div>

I am using cards form lumX : http://ui.lumapps.com/css/cards

Mr X
  • 1,637
  • 3
  • 29
  • 55

2 Answers2

2

You can use ngRepeatStart/End directives with ng-if="($index+1) % 3 == 0":

<div flex="70" flex-offset="15" ng-init="names=['adventure','art','backpacker', 'historic','beach']">
    <h3 style="padding:2em">Welcome {{user.name}}</h3>
    <div flex-container="row" flex-gutter="24">
        <div flex-item ng-repeat="x in names" flex="33">
            <div class="card">
                <div class="card__img card__img--top">
                    <img src="/images/placeholder/{{x}}.png" width="100%">
                    <span class="fs-headline tc-white-1 display-block">{{x}}</span>
                </div>

                <div class="p+">
                    <span class="fs-subhead tc-black-2 display-block"><b>{{x}}</b></span>

                    <div class="paragraph fs-body-1">
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tristique orci a lacinia malesuada.
                        </p>
                    </div>
                </div>

                <div class="card__actions">
                    <div class="switch">
                        <input type="checkbox" id="switch1" class="switch__input">
                        <label for="switch1" class="switch__label">Ac</label>
                    </div>
                </div>
            </div>
        </div>

        <!-- Clearfix after each three iterations -->
        <div class="clearfix" ng-repeat-end ng-if="($index+1) % 3 == 0"></div>
    </div>
</div>

Demo: http://plnkr.co/edit/cGsYhNg6PlQ5dPKsUJ3x?p=preview

dfsq
  • 191,768
  • 25
  • 236
  • 258
  • div is visible with the clear:both style but boxes are not moving down ? – Mr X Nov 17 '15 at 11:15
  • I don't know what CSS you use to float block in the first place, so you can update the question, or better demo with necessary styles. – dfsq Nov 17 '15 at 11:28
0

A good approach is to transform the data in the controller to chunk it into an arrays of 3 to be easily used with ng-repeat loops into rows of 3.

See this post for full details https://stackoverflow.com/a/21653981/5509627

Community
  • 1
  • 1
Tristan
  • 3,301
  • 8
  • 22
  • 27