Ітерація ng-повторюється лише X разів у AngularJs


86

Як я можу використовувати нг-повторення , як для в JavaScript?

приклад:

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

Я хочу повторити ng-repeat 4 рази, але як я можу це зробити?


3
Можливо і те, і інше: директиви мають назви верблюдів, такі як ngBind. До директиви можна звернутися, переклавши назву справи верблюда в зміїну коробку з цими спеціальними символами:, - або _. За бажанням директива може мати префікс x- або data-, щоб зробити її сумісною з валідатором HTML.
асгот

2
вау, як так багато неправильних відповідей, вам слід використовувати ng-repeat = "item in items | limitTo: 4"
Toolkit

Є ймовірність того, що у нього немає масиву для ітерації. Скажімо, щоб відображати зірки в зірковому рейтингу. Може бути поле для того, скільки зірок вам потрібно показати, але це не повторюється.
ніразул

@Toolkit ... а що таке items..?
TJ

Відповіді:


342

Angular поставляється з фільтром limitTo: limit, він підтримує обмеження перших x елементів та останніх x елементів:

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

14
Це має бути відповіддю, оскільки воно також працює з ітерацією над об’єктами в масиві. Плюс його кутова особливість.
Ешлі Кулман,

29
Це неймовірно корисний шматок коду, але це насправді не задовольняє питання ОП. Він просто шукає спосіб повторити n разів, і, ймовірно, не має реального об'єкта для ітерації.
SamHuckaby

2
це має бути відповідь, він використовує інструменти, надані ядром AngularJS
Удо

10
Це насправді не вирішує проблему. Ви припускаєте, що у нього є об’єкт на ім’яitems
Бетмен,

1
Не справді корисна відповідь на запитання (я спеціально погуглив, як повторити 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

50

Ви можете використовувати метод зрізу в об’єкті масиву javascript

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

Короткий російський солодкий


2
чому це неправильно ?. Це працює. Візьмемо інший сценарій, якщо вам потрібні елементи масиву від 2 до 4 з індексів масиву. Чи працює це з фільтром limitTo?
Гіхан

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' тощо :)
Валентин Шибанов

4
Дивно, що Angular не може підтримувати математичний цикл, не вимагаючи функції для його підтримки.
Гвідо Ансельмі

4
Так, я можу уявити, що потрібно повторити 30 разів, писати це як [1,2,3,4].. Яке похмуре рішення
Матей

2
Див. Відповідь DavidLin для кращого рішення.
SamHuckaby

@SamHuckaby проблема повторюється в межах діапазону. LimititTo в цьому випадку марний. Йдеться не про ітерацію набору значень, які щось означають самі по собі, це ітерація, наприклад, 4 рази. Не 4 рази над зрізом існуючого масиву, всього 4 рази. так само, як і в coffeescript, коли ви створюєте спеціальний фрагмент, наприклад "[0..4]", вас насправді не цікавлять фактичні значення, просто ви повторите операцію 4 рази.
mpm

13

Відповідь, надана @mpm, не працює, вона дає помилку

Дублікати в ретрансляторі не допускаються. Використовуйте вираз "track by", щоб вказати унікальні ключі. Повторювач: {0}, повторюваний ключ: {1}

Щоб уникнути цього поряд з

ng-repeat = "t у getTimes (4)"

використання

відстежувати за $ індексом

подобається це

<div ng-repeat = "t in getTimes (4) track by $ index"> TEXT </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
Відповіді на два вищі голоси, здається, припускають, що «елементи» - це масив. Цей зробить масив на місці.
funnyniko

Молодці, це працює. Це єдине рішення, яке насправді вирішує питання OP. Дивно, що він має лише кілька голосів. Просто цікаво, чи є більш елегантне рішення.
Healforgreen

3

Всі відповіді тут, здається, припускають, що елементи - це масив. Однак у 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.