如何使用ng repeat以缩略图格式创建一行中有n个项目的m个项目的列表

How to use ng-repeat for creating the list of m items in thumbnail format having n number of items in a row

本文关键字：项目 一行 列表 repeat ng 何使用 略图 创建 格式      更新时间：2023-09-26

如果有m个项目（26），并且我想在一行中显示n（3），那么如何使用ng repeat来创建此视图。如何包含clear both after 3元素下面的例子要么在同一行中创建所有元素，要么每行都有1个元素。

在下面的例子中，我添加了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/End指令与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

一个好的方法是将控制器中的数据转换为3的数组，以便在将ng个重复循环转换为3行的情况下轻松使用。

有关详细信息，请参阅此帖子https://stackoverflow.com/a/21653981/5509627

相关文章：