Есть ли способ ng-repeat
определенному количеству раз вместо того, чтобы всегда перебирать массив?
Например, ниже я хочу, чтобы элемент списка отображался в 5 раз, предполагая, что он $scope.number
равен 5, дополнительно увеличивая число, чтобы каждый элемент списка увеличивался как 1, 2, 3, 4, 5.
Желаемый результат:
<ul>
<li><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span>4</span></li>
<li><span>5</span></li>
</ul>
javascript
html
angularjs
angularjs-ng-repeat
Malcr001
источник
источник
Ответы:
Обновление (25.09.2008)
Более новые версии AngularJS (> = 1.3.0) позволяют вам делать это только с переменной (функция не требуется):
Это было невозможно во время первого вопроса. Благодарим @Nikhil Nambiar от его ответа ниже для этого обновления
Оригинал (29.05.2013)
На данный момент,
ng-repeat
только принимает коллекцию в качестве параметра, но вы можете сделать это:И где-то в вашем контроллере:
Это позволит вам изменить
$scope.number
любой номер на ваше усмотрение и при этом сохранить привязку, которую вы ищете.РЕДАКТИРОВАТЬ (06.01.2014) - для более новых версий AngularJS (> = 1.1.5) требуется
track by $index
:Вот скрипка с несколькими списками, использующими одну и ту же
getNumber
функцию.источник
ты можешь сделать это:
источник
Вот пример того, как вы могли бы сделать это. Обратите внимание, что меня вдохновил комментарий в документах ng-repeat: http://jsfiddle.net/digitalzebra/wnWY6/
Обратите внимание на директиву ng-repeat:
Вот контроллер:
источник
_.range
из Underscore или lodash для создания массива: $ scope.range = _.range (0, n);Я думаю , что это jsFiddle из этой нити может быть то , что вы ищете.
источник
$scope.number
равен 5». Намерение состояло в том, чтобы использовать целочисленную переменную для определения количества элементов, а не жестко задавать его и не использовать предопределенный массив.$scope.limit = 2
) и использовать его как...|limitTo:limit
- см. Обновленную скрипкуБолее простой подход будет (для примера 5 раз):
источник
Array(5)
(или даже[...Array(5).keys()]
получить массив [0,1,2,3,4])Я столкнулся с той же проблемой. Я наткнулся на эту тему, но мне не понравились методы, которые они использовали здесь. Мое решение было использовать underscore.js, который мы уже установили. Это так просто, как это:
Это сделает именно то, что вы ищете.
источник
$scope._ = _
.$rootScope
чтобы его можно было использовать везде. Поместите это в своюapp.run
функцию сразу послеapp.config
:app.run(function ($rootScope) { $rootScope._ = _; });
Я хотел, чтобы мой HTML был минимальным, поэтому определил небольшой фильтр, который создает массив [0,1,2, ...], как это сделали другие:
После этого на виде можно использовать так:
источник
Это действительно ужасно, но работает без контроллера для целого числа или переменной:
целое число:
переменная:
источник
_ in (_ = []).length = 33; _ track by $index
немного меньшеЕсть много способов сделать это. Я был действительно обеспокоен наличием логики в моем контроллере, поэтому я создал простую директиву, чтобы решить проблему повторения элемента n раз.
Установка:
Директива может быть установлена с помощью
bower install angular-repeat-n
Пример:
производит:
1234
Это также работает, используя переменную области видимости:
Источник:
Github
источник
Это лишь небольшое изменение принятого ответа, но вам не нужно создавать новую функцию. Только для импорта «Массив» в области:
Смотрите эту скрипку для живого примера.
источник
Самый простой ответ: 2 строки кода
JS (в вашем контроллере AngularJS)
HTML
... где
repeatCount
число повторений, которые должны появиться в этом месте.источник
repeatCount
фактическое число в HTML, и если это число меньше или равноMAX_REPEATS
, это позволит вам установить число повторов в HTML.ngRepeat
директивы. ИспользованиеArray.prototype.slice
и идиоматический JS всегда следует выбирать над библиотекой, например underscore.js (зависит от совместимости браузера).angular дает очень приятную функцию, называемую slice . с ее помощью вы можете достичь того, что ищете. например, ng-repeat = "ab in abc.slice (startIndex, endIndex)"
это демо: http://jsfiddle.net/sahilosheal/LurcV/39/ поможет вам и расскажет, как использовать эту функцию «облегчения жизни». :)
HTML:
CSS:
нг-JS:
источник
Вот ответ на угловой 1.2.x
В основном это то же самое, с небольшой модификацией
ng-repeat
вот скрипка: http://jsfiddle.net/cHQLH/153/
это связано с тем, что angular 1.2 не допускает дублирования значений в директиве. Это означает, что если вы пытаетесь сделать следующее, вы получите ошибку.
источник
Вы можете использовать
ng-if
директиву сng-repeat
Итак, если num - это количество повторений элемента:
источник
ng-repeat
таким образом будет выводить его закомментированные теги (и<!-- ngIf: $index < num -->
т. Д.). Там просто не будет никакихli
элементов для рендеринга DOM. Проверьте «просмотр источника» на панели результатов здесь, чтобы понять, что я имею в виду.Вы можете использовать этот пример.
Внутри контроллера:
Пример для элемента select на стороне HTML-кода:
источник
Для пользователей, использующих CoffeeScript, вы можете использовать диапазон понимания:
директива
или контроллер
шаблон
источник
Немного расширив первый ответ Ивана, вы можете использовать строку как коллекцию без оператора track by, если символы уникальны, поэтому, если вариант использования меньше 10 чисел, как вопрос, который я бы просто сделал :
Это немного странно, конечно, но достаточно просто, чтобы на них взглянуть, и не особенно смущает.
источник
Сначала создайте угловой фильтр, используя LoDash:
Функция LoDash times способна обрабатывать нулевые, неопределенные, 0, числа и строковое представление чисел.
Затем используйте его в своем HTML, как это:
или
источник
Мне нужно было более динамичное решение для этого - где я мог бы увеличить повторение.
HTML
Дубликатор управления
JS
источник
Angular предоставляет фильтры для изменения коллекции. В этом случае коллекция будет нулевой, то есть [], и фильтр также принимает аргументы, как показано ниже:
JS:
Этот метод очень похож на предложенный выше и не обязательно превосходит его, но показывает мощь фильтров в AngularJS.
источник
Если n не слишком велико, другим вариантом может быть использование split ('') со строкой из n символов:
источник
Я столкнулся с той же проблемой, и вот что я вышел:
... и HTML:
Живой пример
Я использовал
times
функцию подчеркивания, как мы уже использовали ее в проекте, но вы можете легко заменить ее на собственный код.источник
Я создаю директиву многократного использования, где максимальное число будет получено из другого ng-repeat. Итак, это редактирование лучшего ответа.
Просто измените код на контроллере на это -
Это вернет новый массив с указанным количеством итераций
источник
после итерации по строке будет отображаться элемент для каждого символа:
мы можем использовать этот уродливый, но без кода обходной путь, используя
number|n decimal places
собственный фильтр.таким образом, у нас будут
mynumber
элементы без дополнительного кода. Say'0.000'
.Мы используем
mynumber - 2
для компенсации.0.
Это не будет работать для чисел ниже 3, но может быть полезно в некоторых случаях.
источник
track by $index
?ng-repeat="i in [1,2,3,4]"
$scope.number
aaaa
был пример, чтобы объяснить мой - не очень элегантный - обходной путь. Используя жестко закодированные «aaaa» или «abcd», вы получите список фиксированной длины, но добавивmynumber-2
десятичные дробные числа к 0, вы получаете «строку» сmynumber
символами. Скажемmynumber=5
, вы получили'0.000'
, затем мы повторим это, используя $ indexисточник
простой способ:
в компоненте / контроллере и затем:
Этот код взят из моего проекта машинописного текста, но может быть преобразован в чистый JavaScript
источник