Итерация ng-repeat только X раз в AngularJs


87

Как я могу использовать ng-repeat как для в Javascript?

пример:

<div ng-repeat="4">Text</div>

Я хочу повторить итерацию с ng-repeat 4 раза, но как я могу это сделать?


3
Возможны оба варианта: директивы имеют имена в верблюжьем регистре, такие как ngBind. Директиву можно вызвать, переведя имя случая верблюда в регистр змеи с помощью этих специальных символов:, - или _. При желании директива может иметь префикс x- или data-, чтобы сделать ее совместимой с валидатором HTML.
asgoth 07

2
вау, почему так много неправильных ответов, вы должны использовать ng-repeat = "item in items | limitTo: 4"
Инструментарий

Есть шанс, что у него нет массива для перебора. Скажем, для отображения звезд в звездном рейтинге. Может быть поле для того, сколько звезд вам нужно отобразить, но это не итерация.
nirazul 02

@Toolkit ... а что это items..?
TJ

Ответы:


343

Angular поставляется с фильтром limitTo: limit, он поддерживает ограничение первых x элементов и последних x элементов:

<div ng-repeat="item in items|limitTo:4">{{item}}</div>

14
Это должно быть ответом, поскольку он также работает с итерацией по объектам в массиве. Плюс это угловая функция.
Эшли Кулман

29
Это невероятно полезный фрагмент кода, но на самом деле он не отвечает на вопрос OP. Он просто ищет способ повторить n раз, и, скорее всего, у него нет реального объекта для итерации.
SamHuckaby

2
это должен быть ответ, он использует инструменты, предоставляемые ядром AngularJS
Удо

10
На самом деле это не решает проблему. Вы предполагаете, что у него есть объект с именемitems
Бэтмен

1
Это действительно не полезный ответ на вопрос (я специально искал в Google, как выполнять итерацию X раз, а не ограничивать X), но, тем не менее, полезный фрагмент кода.
MacK

65

Это простейший обходной путь, который я мог придумать.

<span ng-repeat="n in [].constructor(5) track by $index">
{{$index}}
</span>

Вот пример Plunker.


2
Умно и очень полезно, без использования каких-либо функций в контроллере. Все еще не понимает, почему это не угловая функция
MacK

1
Это должен быть ответ . OP попросил «использовать ng-repeat like for». Это означает, что вся реализация находится прямо в представлении, без какой-либо «помощи» со стороны контроллера. Это решение именно так ... и чертовски умно.
karfus

Красиво, но работает не на всех угловых версиях. Я использую 1.2.9, и он не поддерживается:Error: [$parse:isecfld]
Emaborsa 06

50

Вы можете использовать метод среза в объекте массива javascript

<div ng-repeat="item in items.slice(0, 4)">{{item}}</div>

Короткое и сладкое


2
почему это неправильно ?. Оно работает. Возьмем другой сценарий, если вам нужны элементы массива от 2 до 4 из индексов массива. Работает ли с фильтром limitTo?
Gihan

4
Это не неправильно, просто это не так простоitem in items|limitTo:4
CENT1PEDE

1
Это добавляет функциональность, позволяющую отображать элементы 1–4, а затем нажимать кнопку, чтобы изменить .slice (0,4) на .slice (5,8), что позволяет использовать простой пагинатор. Благодарность!
BaneStar007

39

в html:

<div ng-repeat="t in getTimes(4)">text</div>

и в контроллере:

$scope.getTimes=function(n){
     return new Array(n);
};

http://plnkr.co/edit/j5kNLY4Xr43CzcjM1gkj

РЕДАКТИРОВАТЬ :

с angularjs> 1.2.x

<div ng-repeat="t in getTimes(4) track by $index">TEXT</div>

19
другие варианты: t in [1,2,3,4]или и t in 'aaaa' т.д :)
Валентин Шибанов 07

4
Кажется странным, что Angular не может поддерживать математический цикл, не требуя, чтобы функция поддерживала его.
Гвидо Ансельми,

4
Да, я могу представить, что придется повторять 30 раз, записывая это как [1,2,3,4]... Какое мрачное решение это
Матей

2
См. Ниже ответ DavidLin для лучшего решения.
SamHuckaby

@SamHuckaby проблема заключается в повторении диапазона. LimitTo бесполезен в этом случае. Речь идет не об итерации по набору значений, которые что-то значат сами по себе, это, например, 4-кратная итерация. Не 4 раза по части существующего массива, а всего 4 раза. точно так же, как в coffeescript, когда вы создаете специальный фрагмент, такой как «[0..4]», вас не волнуют фактические значения, вы просто повторяете операцию 4 раза.
mpm

13

Ответ @mpm не работает, он дает ошибку

Дубликаты в репитере не допускаются. Используйте выражение «отслеживать по», чтобы указать уникальные ключи. Повторитель: {0}, Повторяющийся ключ: {1}

Чтобы избежать этого вместе с

ng-repeat = "т в getTimes (4)"

использовать

отслеживать по $ index

как это

<div ng-repeat = "t in getTimes (4) track by $ index"> ТЕКСТ </div>


моя техника работала с версией angularjs, которую я использовал. Просто проверьте plunkr, я обновлю его как можно скорее.
mpm

10

Чтобы повторить 7 раз, попробуйте использовать массив с длиной = 7 , затем отследите его по $ index :

<span ng-repeat="a in (((b=[]).length=7)&&b) track by $index" ng-bind="$index + 1 + ', '"></span>

b=[]создайте пустой массив «b»,
.length=7установите его размер на «7»,
&&bпусть новый массив «b» будет доступен для ng-repeat,
track by $indexгде «$ index» - позиция итерации.
ng-bind="$index + 1"дисплей, начиная с 1.

Повторить X раз:
просто замените 7 на X .


Неясно, что дает этот ответ, что еще не охвачено принятым ответом или двумя более высокими голосами.
JamesT

Не более того, насколько мощным может быть Angular.
funnyniko

3
Два более высоких голоса, кажется, предполагают, что «items» - это массив. Это делает массив на месте.
funnyniko

Молодцы, работает. Это единственное решение, которое действительно решает вопрос OP. Удивительно, что у него всего несколько голосов. Просто интересно, есть ли более элегантное решение.
Healforgreen

3

Все ответы здесь, похоже, предполагают, что items представляет собой массив. Однако в AngularJS это может быть и объект. В этом случае ни фильтрация с помощью limitTo, ни array.slice не будет работать. В качестве одного из возможных решений вы можете преобразовать свой объект в массив, если вы не против потерять ключи объекта. Вот пример фильтра для этого:

myFilter.filter('obj2arr', function() {
    return function(obj) {
        if (typeof obj === 'object') {
            var arr = [], i = 0, key;
            for( key in obj ) {
                arr[i] = obj[key];
                i++;
            }
            return arr;
        }
        else {
            return obj;
        }

    };
});

Как только это будет массив, используйте slice или limitTo, как указано в других ответах.

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.