Есть ли способ ng-повторять определенное количество раз вместо того, чтобы постоянно выполнять итерации по массиву?
Например, ниже я хочу, чтобы элемент списка отображался 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>
В настоящее время ng-repeat
принимает в качестве параметра только коллекцию, но вы можете сделать это:
<ul>
<li ng-repeat="i in getNumber(number)"><span>{{$index+1}}</span></li>
</ul>
И где-нибудь в вашем контроллере:
$scope.number = 5;
$scope.getNumber = function(num) {
return new Array(num);
}
Это позволит вам изменить $scope.number
на любое число по вашему желанию и сохранить привязку, которую вы ищете.
[Здесь приведен пример][1] с парой списков, использующих ту же функцию getNumber
.
РЕДАКТИРОВАНИЕ 1/6/2014: В новых версиях Angular 1.x используется следующий синтаксис:
<li ng-repeat="i in getNumber(number) track by $index">
РЕДАКТИРОВАНИЕ 9/25/2018: Более новые версии Angular 1.x позволяют делать это без функции. Если ваш код прост и вам не нужна функция getNumber
по другим причинам, вы можете опустить ее и просто сделать это:
<div ng-repeat="x in [].constructor(number) track by $index">
Заслуга @Nikhil Nambiar из его ответа ниже за это обновление
Вот пример того, как это можно сделать. Обратите внимание, что меня вдохновил комментарий в документации по ng-repeat:
.Обратите внимание на директиву ng-repeat:
<div ng-app>
<div ng-controller="TestCtrl">
<div ng-repeat="a in range(5) track by $index">{{$index + 1}}</div>
</div>
</div>
Вот контроллер:
function TestCtrl($scope) {
$scope.range = function(n) {
return new Array(n);
};
};
Я думаю, что этот [jsFiddle][1] из этой темы может быть тем, что вы'ищете.
<div ng-app ng-controller="Main">
<div ng-repeat="item in items | limitTo:2">
{{item.name}}
</div>
</div>
Более простой подход (пример 5 раз):
<div ng-repeat="x in [].constructor(5) track by $index">
...
</div>
Я столкнулся с той же проблемой. Я наткнулся на эту ветку, но ничего'т, как методы, которые они провели здесь. Мое решение было использовать underscore.js, который мы уже установили. Это's, как просто, как это:
<ul>
<li ng-repeat="n in _.range(1,6)"><span>{{n}}</span></li>
</ul>
Это будет делать именно то, что вы'вновь ищу.
Я хотел, чтобы мои HTML-очень минимальный, поэтому определен небольшой фильтр, который создает массив [0,1,2,...], как это сделали другие:
angular.module('awesomeApp')
.filter('range', function(){
return function(n) {
var res = [];
for (var i = 0; i < n; i++) {
res.push(i);
}
return res;
};
});
После этого, на экране можно использовать такой:
<ul>
<li ng-repeat="i in 5 | range">
{{i+1}} <!-- the array will range from 0 to 4 -->
</li>
</ul>
Это действительно некрасиво, но это работает без контроллера либо целое число или переменную:
целое число:
<span ng-repeat="_ in ((_ = []) && (_.length=33) && _) track by $index">{{$index}}</span>
переменной:
<span ng-repeat="_ in ((_ = []) && (_.length=myVar) && _) track by $index">{{$index}}</span>
Есть много способов сделать это. Я был действительно обеспокоен, что логика в моем контроллере, так что я создал простую директиву, чтобы решить проблемы повторения элемента N-раз.
Установка:
Эта директива может быть установлена с помощью установки беседки угловые-повторяю-Н
Пример:
<span ng-repeat-n="4">{{$index}}</span
производит: 1234
Она также работает с помощью переменной объем:
<span ng-repeat-n="repeatNum"></span>
Источник:
Это лишь небольшое изменение принято отвечать, но вы Don't действительно нужно создать новые функция. Только для импорта 'время' по объему:
<div ng-app="myapp">
<div ng-controller="ctrlParent">
<ul>
<li ng-repeat="i in counter(5) track by $index">
<span>{{$index+1}}</span></li>
</ul>
</div>
</div>
в
var app = angular.module('myapp',[]);
app.controller('ctrlParent',function($scope){
$scope.myNumber = 5;
$scope.counter = Array;
});
См. [эта скрипка][1] на живом примере.
ПЛ (в ваш контроллер в AngularJS)
$scope.range = new Array(MAX_REPEATS); // set MAX_REPEATS to the most repetitions you will ever need in a single ng-repeat that makes use of this strategy
В формате HTML
<div ng-repeat="i in range.slice(0,repeatCount) track by $index"></div>
...где значением repeatcount-это количество повторов, которые должны появиться в этом месте.
угловые дает очень сладкая функция называется фрагмент.. с помощью этого вы можете достичь того, чего вы ищете. например, НГ-повторите="по АБ в ABC.(параметр startindex,endindex включительно) на" среза;
это демо :
/embedded/result,js,html,css/">HTML-код:
<div class="div" ng-app >
<div ng-controller="Main">
<h2>sliced list(conditional NG-repeat)</h2>
<ul ng-controller="ctrlParent">
<li ng-repeat="ab in abc.slice(2,5)"><span>{{$index+1}} :: {{ab.name}} </span></li>
</ul>
<h2>unsliced list( no conditional NG-repeat)</h2>
<ul ng-controller="ctrlParent">
<li ng-repeat="ab in abc"><span>{{$index+1}} :: {{ab.name}} </span></li>
</ul>
</div>
Усс:
ul
{
list-style: none;
}
.div{
padding:25px;
}
li{
background:#d4d4d4;
color:#052349;
}
НГ-Яш:
function ctrlParent ($scope) {
$scope.abc = [
{ "name": "What we do", url: "/Home/AboutUs" },
{ "name": "Photo Gallery", url: "/home/gallery" },
{ "name": "What we work", url: "/Home/AboutUs" },
{ "name": "Photo play", url: "/home/gallery" },
{ "name": "Where", url: "/Home/AboutUs" },
{ "name": "playground", url: "/home/gallery" },
{ "name": "What we score", url: "/Home/AboutUs" },
{ "name": "awesome", url: "/home/gallery" },
{ "name": "oscar", url: "/Home/AboutUs" },
{ "name": "american hustle", url: "/home/gallery" }
];
}
function Main($scope){
$scope.items = [{sort: 1, name: 'First'},
{sort: 2, name: 'Second'},
{sort: 3, name: 'Third'},
{sort: 4, name:'Last'}];
}
Вот ответ для угловых 1.2.х
По сути, это те же, с небольшими изменениями в `НГ-повторите
<li ng-repeat="i in getNumber(myNumber) track by $index">
вот скрипку:
это происходит потому, что угловой 1.2 не'т разрешить повторяющиеся значения в директиве. Это означает, что если вы пытаетесь сделать следующее, Вы получите сообщение об ошибке.
<li ng-repeat="x in [1,1,1]"></li>
Вы можете использовать НГ-если директива с НГ-повторите
Поэтому, если чис-число раз вам нужен элемент повторяется:
<li ng-repeat="item in list" ng-if="$index < num">
Расширение немного о Иван's первый ответ немного, вы можете использовать строку в качестве коллекции без следа заявление так долго, как персонажи по-своему уникальны, так что если использовать-дело меньше чем на 10 чисел, как этот вопрос я бы просто сделать:
<ul>
<li ng-repeat="n in '12345'"><span>{{n}}</span></li>
</ul>
Который немного jenky, конечно, но достаточно просто посмотреть и не особенно смущают.
Вы можете использовать этот пример.
Внутри контроллера:
$scope.data = {
'myVal': 33,
'maxVal': 55,
'indexCount': function(count) {
var cnt = 10;
if (typeof count === 'number') {
cnt = count;
}
return new Array(cnt);
}
};
Пример для выберите элемент в представлении HTML код:
<select ng-model="data.myVal" value="{{ data.myVal }}">
<option ng-repeat="i in data.indexCount(data.maxVal) track by $index" value="{{ $index + 1 }}">{{ $index + 1 }}</option>
</select>
Для пользователей с помощью CoffeeScript, вы можете использовать понимание диапазона:
Директивы
link: (scope, element, attrs) ->
scope.range = [1..+attrs.range]
или контроллер
$scope.range = [1..+$someVariable]
$scope.range = [1..5] # Or just an integer
Шаблон
<div ng-repeat="i in range">[ the rest of your code ]</div>
Во-первых, создать угловой фильтр, используя Лодашь:
angular.module('myApp').filter('times', function(){
return function(value){
return _.times(value || 0);
}
});
Функция Лодашь раз способен обрабатывать значение null, неопределено, 0, цифры и строковое представление чисел.
Затем, использовать его в html, как это:
<span ng-repeat="i in 5 | times">
<!--DO STUFF-->
</span>
или
<span ng-repeat="i in myVar | times">
<!--DO STUFF-->
</span>
Угловые предоставляет фильтры, чтобы изменить коллекцию. В этом случае коллекция будет нуль, т. е. [], и фильтр также принимает аргументов, следующим образом:
<div id="demo">
<ul>
<li ng-repeat="not in []|fixedNumber:number track by $index">{{$index}}</li>
</ul>
</div>
ДШ:
module.filter('fixedNumber', function() {
return function(emptyarray, number) {
return Array(number);
}
});
module.controller('myCtrl', ['$scope', function($scope) {
$scope.number = 5;
}]);
Этот метод очень похож на те, предложенной выше, и это'т всегда выше, но показывает силу фильтров на AngularJS.