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

Есть ли способ 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>
404
30 мая '13 в 1:18
источник поделиться
26 ответов

На данный момент 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 на любое число по вашему $scope.number и при этом поддерживать привязку, которую вы ищете.

Вот скрипка с несколькими списками, использующими одну и getNumber же функцию getNumber.

РЕДАКТИРОВАНИЕ 06.01.2014: Более новые версии Angular 1.x используют следующий синтаксис:

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

РЕДАКТИРОВАНИЕ 25.09.2008: Новые версии Angular 1.x позволяют вам делать это без функции. Если ваш код прост и вам не нужна функция getNumber по другим причинам, теперь вы можете опустить это и просто сделать это:

<div ng-repeat="x in [].constructor(number) track by $index">

Благодарим @Nikhil Nambiar от его ответа ниже для этого обновления

550
30 мая '13 в 1:26
источник

Связанные вопросы


Похожие вопросы

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

<div ng-repeat="i in [1, 2, 3, 4]">
  ...
</div>
130
16 февр. '14 в 3:53
источник

Вот пример того, как вы могли это сделать. Обратите внимание, что я был вдохновлен комментарием в документах 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);
    };
};
93
30 мая '13 в 1:28
источник

Я думаю, что этот jsFiddle из этого потока может быть тем, что вы ищете.

<div ng-app ng-controller="Main">
   <div ng-repeat="item in items | limitTo:2">
       {{item.name}}
   </div>
</div>
80
30 мая '13 в 1:27
источник

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

<div ng-repeat="x in [].constructor(5) track by $index">
       ...
</div>
53
16 июня '17 в 20:22
источник

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

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

Это сделает то, что вы ищете.

49
11 янв. '14 в 2:12
источник

Я хотел, чтобы мой 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>
48
10 апр. '15 в 5:43
источник

Это действительно UGLY, но он работает без контроллера либо для целого числа, либо для переменной:

целое число:

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

переменная:

<span ng-repeat="_ in ((_ = []) && (_.length=myVar) && _) track by $index">{{$index}}</span>
33
17 янв. '15 в 0:33
источник

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

Установка:

Директива может быть установлена ​​с помощью bower install angular-repeat-n

Пример:

<span ng-repeat-n="4">{{$index}}</span

производит: 1234

Он также работает с использованием переменной области видимости:

<span ng-repeat-n="repeatNum"></span>

Источник:

Github

16
10 авг. '14 в 0:19
источник

Это лишь незначительная вариация принятого ответа, но вам действительно не нужно создавать новую функцию. Только для импорта "Массив" в области:

<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;
});

Посмотрите эту скрипту для живого примера.

13
29 янв. '16 в 3:50
источник

Самый простой ответ: 2 строки кода

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

9
10 дек. '14 в 21:17
источник

angular дает очень слабую функцию под названием slice. Используя это, вы можете добиться того, что ищете. например ng-repeat = "ab в abc.slice(startIndex, endIndex)"

это демо: 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>

CSS

ul
{
list-style: none;
}
.div{
    padding:25px;
}
li{
    background:#d4d4d4;
    color:#052349;
}

нг-JS:

 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'}];
    }
8
03 марта '14 в 10:37
источник

Вы можете использовать директиву ng-if с ng-repeat

Итак, если num - это количество раз, которое вам нужно повторить элемент:

<li ng-repeat="item in list" ng-if="$index < num">
6
27 авг. '15 в 17:33
источник

Получает ответ для angular 1.2.x

В принципе, это одно и то же, с небольшой модификацией ng-repeat

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

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

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

<li ng-repeat="x in [1,1,1]"></li>
6
14 мая '14 в 12:19
источник

Для пользователей, использующих 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>
3
18 июля '15 в 20:10
источник

Если немного расширить на Ивана, то сначала немного ответьте, вы можете использовать строку как коллекцию без оператора track by, если символы уникальны, поэтому, если вариант использования меньше 10 чисел, как вопрос, который я бы просто сделал:

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

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

3
22 февр. '18 в 2:07
источник

Сначала создайте фильтр angular, используя LoDash:

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

Функция времени LoDash способна обрабатывать нулевые, undefined, 0, числа и строковое представление чисел.

Затем используйте его в своем HTML как это:

<span ng-repeat="i in 5 | times">
 <!--DO STUFF-->
</span>

или

<span ng-repeat="i in myVar | times">
 <!--DO STUFF-->
</span>
2
20 окт. '16 в 20:54
источник

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

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

$scope.data = {
    'myVal': 33,
    'maxVal': 55,
    'indexCount': function(count) {
        var cnt = 10;
        if (typeof count === 'number') {
            cnt = count;
        }
        return new Array(cnt);
    }
};

Пример для элемента select со стороны 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>
2
12 дек. '13 в 18:23
источник

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

<div ng-controller="MainCtrl">
<div ng-repeat="a in 'abcdefgh'.split('')">{{$index}}</div>
</div>
1
07 июля '14 в 16:07
источник

Я столкнулся с той же проблемой, и это то, с чем я вышел:

(function () {
  angular
    .module('app')
    .directive('repeatTimes', repeatTimes);

  function repeatTimes ($window, $compile) {
    return { link: link };

    function link (scope, element, attrs) {
      var times    = scope.$eval(attrs.repeatTimes),
          template = element.clone().removeAttr('repeat-times');

      $window._(times).times(function (i) {
        var _scope = angular.extend(scope.$new(), { '$index': i });
        var html = $compile(template.clone())(_scope);

        html.insertBefore(element);
      });

      element.remove();
    }
  }
})();

... и html:

<div repeat-times="4">{{ $index }}</div>

LIVE ПРИМЕР

Я использовал функцию подчеркивания times, поскольку мы уже использовали ее в проекте, но вы можете легко заменить ее с помощью собственного кода.

1
06 авг. '15 в 23:09
источник

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

<div id="demo">
    <ul>
        <li ng-repeat="not in []|fixedNumber:number track by $index">{{$index}}</li>
    </ul>
</div>

JS:

module.filter('fixedNumber', function() {
    return function(emptyarray, number) {
        return Array(number);
    }
});

module.controller('myCtrl', ['$scope', function($scope) {
    $scope.number = 5;
}]);

Этот метод очень похож на предложенный выше и не обязательно превосходит, но показывает мощность фильтров в AngularJS.

1
06 марта '14 в 3:07
источник
$scope.number = 5;

<div ng-repeat="n in [] | range:$scope.number">
      <span>{{$index}}</span>
</div>
0
14 мая '19 в 10:48
источник

поскольку итерация по строке будет отображать элемент для каждого char:

<li ng-repeat = "k in 'aaaa' track by $index">
   {{$index}} //THIS DOESN'T ANSWER OP QUESTION. Read below.
</li>

мы можем использовать этот уродливый, но обходной код без кода, используя собственный фильтр number|n decimal places.

 <li ng-repeat="k in (0|number:mynumber -2 ) track by $index">
    {{$index}}
 </li>

таким образом у нас будут элементы mynumber без дополнительного кода. Скажите '0.000'.
Мы используем mynumber - 2 для компенсации 0.
Он не будет работать для чисел ниже 3, но может быть полезен в некоторых случаях.

0
22 апр. '14 в 23:40
источник

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

Просто измените код на контроллере на это -

$scope.getNumber = function(num) {
    var temp = [];
    for(var j = 0; j < num; j++){
        temp.push(j)
    }
    return temp; 
}

Это вернет новый массив с указанным числом итераций

0
03 авг. '17 в 21:13
источник

Мне нужно было более динамичное решение - где я мог бы увеличивать повторение.

HTML

<div ng-repeat="n in newUserCount">
<input type="text" value="" name="newuser{{n}}"/>
</div>

Управление дубликатором

<span class="helper" ng-click="duplicateUser()">
Create another user with the same permissions
</span>

JS

 $scope.newUserCount = Array('1');
var primaryValue = 1;
$scope.duplicateUser = function()
{
    primaryValue++;
    $scope.newUserCount.push(primaryValue)
}
0
05 дек. '13 в 17:54
источник

простой способ:

    public defaultCompetences: Array<number> = [1, 2, 3];

в компоненте/контроллере, а затем:

    <div ng-repeat="i in $ctrl.defaultCompetences track by $index">

Этот код из моего проекта typescript, но может быть перестроен на чистый javascript

-1
29 нояб. '17 в 17:51
источник

Посмотрите другие вопросы по меткам или Задайте вопрос