Как использовать ng-repeat для создания списка элементов m в формате миниатюр, имеющих n количество элементов в строке

76
5

Если m элементов (26), и я хочу отобразить n (3) в строке, как использовать ng-repeat для создания этого представления.
Как включить четкие как после трех элементов
В приведенном ниже примере либо создаются все элементы в одной строке, либо идут по 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

спросил(а) 2015-11-17T11:47:00+03:00 4 года, 3 месяца назад
1
Решение
60

Хороший подход состоит в том, чтобы преобразовать данные в контроллере, чтобы объединить его в массивы из 3, которые легко будут использоваться с петлями ng-repeat в строки по 3.

Смотрите это сообщение для полной информации
qaru.site/questions/51341/...

ответил(а) 2015-11-17T12:10:00+03:00 4 года, 3 месяца назад
63

Вы можете использовать директивы 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

ответил(а) 2015-11-17T12:04:00+03:00 4 года, 3 месяца назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема