javascript – 如何使用ng-repeat创建具有n行项目的缩略图格式的m项列表

2019年7月22日 109次阅读

如果是m个项目(26)并且我想连续显示n(3),那么如何使用ng-repeat创建此视图.

如何在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

点赞