如果m个项目（26），我想显示N（3）成一排，如何使用NG-重复创建了这一观点。如何包括明确双方3个元素后下面的例子或创建在同一行的所有元素或每行中来了1。

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.

在下面的例子中我加入M = 5，

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>

我是用卡形成lumX： http://ui.lumapps.com/css/cards

推荐答案

您可以使用 ngRepeatStart /结束与指令NG-IF =（ $指数+ 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/编辑/ cGsYhNg6PlQ5dPKsUJ3x？p = preVIEW