Как сделать ng-repeat определенное количество раз вместо повторения по массиву?

Есть ли способ 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>
Комментарии к вопросу (2)
Решение

В настоящее время 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 из его ответа ниже за это обновление

Комментарии (15)

вы можете сделать это:

<div ng-repeat="i in [1, 2, 3, 4]">
  ...
</div>
Комментарии (5)

Вот пример того, как это можно сделать. Обратите внимание, что меня вдохновил комментарий в документации по ng-repeat: http://jsfiddle.net/digitalzebra/wnWY6/.

Обратите внимание на директиву 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);
    };
};
Комментарии (1)

Я думаю, что этот [jsFiddle][1] из этой темы может быть тем, что вы'ищете.

<div ng-app ng-controller="Main">
   <div ng-repeat="item in items | limitTo:2">
       {{item.name}}
   </div>
</div>
Комментарии (6)

Более простой подход (пример 5 раз):

<div ng-repeat="x in [].constructor(5) track by $index">
       ...
</div>
Комментарии (4)

Я столкнулся с той же проблемой. Я наткнулся на эту ветку, но ничего'т, как методы, которые они провели здесь. Мое решение было использовать underscore.js, который мы уже установили. Это's, как просто, как это:

<ul>
    <li ng-repeat="n in _.range(1,6)"><span>{{n}}</span></li>
</ul>

Это будет делать именно то, что вы'вновь ищу.

Комментарии (4)

Я хотел, чтобы мои 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}} 
  </li>
</ul>
Комментарии (1)

Это действительно некрасиво, но это работает без контроллера либо целое число или переменную:

целое число:

<span ng-repeat="_ in ((_ = []) && (_.length=33) && _) track by $index">{{$index}}</span>

переменной:

<span ng-repeat="_ in ((_ = []) && (_.length=myVar) && _) track by $index">{{$index}}</span>
Комментарии (3)

Есть много способов сделать это. Я был действительно обеспокоен, что логика в моем контроллере, так что я создал простую директиву, чтобы решить проблемы повторения элемента N-раз.

Установка:

Эта директива может быть установлена с помощью установки беседки угловые-повторяю-Н

Пример:


<span ng-repeat-n="4">{{$index}}
Комментарии (1)

Это лишь небольшое изменение принято отвечать, но вы 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] на живом примере.

Комментарии (1)

Простой ответ: 2 строки кода

ПЛ (в ваш контроллер в 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-это количество повторов, которые должны появиться в этом месте.

Комментарии (4)

угловые дает очень сладкая функция называется фрагмент.. с помощью этого вы можете достичь того, чего вы ищете. например, НГ-повторите="по АБ в ABC.(параметр startindex,endindex включительно) на&quot среза;

это демо :http://jsfiddle.net/sahilosheal/LurcV/39 не будет Вам помочь и рассказать вам, как использовать этот "и делает жизнь легким" и функция. :)

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'}];
    }
Комментарии (0)

Вот ответ для угловых 1.2.х

По сути, это те же, с небольшими изменениями в `НГ-повторите

<li ng-repeat="i in getNumber(myNumber) track by $index">

вот скрипку: http://jsfiddle.net/cHQLH/153/

это происходит потому, что угловой 1.2 не'т разрешить повторяющиеся значения в директиве. Это означает, что если вы пытаетесь сделать следующее, Вы получите сообщение об ошибке.

<li ng-repeat="x in [1,1,1]"></li>
Комментарии (0)

Вы можете использовать НГ-если директива с НГ-повторите

Поэтому, если чис-число раз вам нужен элемент повторяется:

<li ng-repeat="item in list" ng-if="$index  num">
Комментарии (1)

Расширение немного о Иван's первый ответ немного, вы можете использовать строку в качестве коллекции без следа заявление так долго, как персонажи по-своему уникальны, так что если использовать-дело меньше чем на 10 чисел, как этот вопрос я бы просто сделать:

<ul>
   <li ng-repeat="n in '12345'"><span>{{n}}</span></li>
</ul>

Который немного jenky, конечно, но достаточно просто посмотреть и не особенно смущают.

Комментарии (0)

Вы можете использовать этот пример.

Внутри контроллера:

$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 }}">
    {{ $index + 1 }}
Комментарии (0)

Для пользователей с помощью 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>
Комментарии (0)

Во-первых, создать угловой фильтр, используя Лодашь:

angular.module('myApp').filter('times', function(){
   return function(value){
      return _.times(value || 0);
   }
});

Функция Лодашь раз способен обрабатывать значение null, неопределено, 0, цифры и строковое представление чисел.

Затем, использовать его в html, как это:

<span ng-repeat="i in 5 | times">

</span>

или

<span ng-repeat="i in myVar | times">

</span>
Комментарии (0)

Если N не слишком высокие, другим вариантом может быть использование сплит('') с строку из n символов :

<div ng-controller="MainCtrl">
<div ng-repeat="a in 'abcdefgh'.split('')">{{$index}}</div>
</div>
Комментарии (1)

Угловые предоставляет фильтры, чтобы изменить коллекцию. В этом случае коллекция будет нуль, т. е. [], и фильтр также принимает аргументов, следующим образом:

<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.

Комментарии (0)