How to use ng-repeat to create a list of m elements in thumbnail format having n number of elements per row

Question

If there are m elements (26), and I want to display n (3) in a row, how to use ng-repeat to create this view. How to enable clear as after three elements In the example below, either all elements are created in one line, or go 1 in each line.

In the example below, 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 use lumX form cards: http://ui.lumapps.com/css/cards

Answer 1

You can use directives ngRepeatStart/Endwith 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>

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

Answer 2

, , 3, ng-repeat 3.

fooobar.com/questions/51341/...