Maneira de repetir o número definido de vezes em vez de repetir a matriz?

Existe uma maneira de repetir um número definido de vezes, em vez de sempre ter que percorrer um array?

Por exemplo, abaixo eu quero que o item da lista apareça 5 vezes assumindo $scope.number igual a 5, além de incrementar o número para que cada item da lista seja incrementado como 1, 2, 3, 4, 5

Resultado desejado:

 
  • 1
  • 2
  • 3
  • 4
  • 5

No momento, o ng-repeat só aceita uma coleção como parâmetro, mas você pode fazer isso:

 
  • {{$index+1}}

E em algum lugar no seu controlador:

 $scope.number = 5; $scope.getNumber = function(num) { return new Array(num); } 

Isso permitiria que você alterasse $scope.number para qualquer número que $scope.number e ainda manteria a binding que está procurando.

Aqui está um violino com algumas listas usando a mesma function getNumber .

EDIT 06/01/2014 : versões mais recentes do Angular usam a seguinte syntax:

 
  • você consegue fazer isso:

     
    ...

    Aqui está um exemplo de como você pode fazer isso. Note que eu fui inspirado por um comentário nos documentos do ng-repeat: http://jsfiddle.net/digitalzebra/wnWY6/

    Observe a diretiva ng-repeat:

     
    {{$index + 1}}

    Aqui está o controlador:

     function TestCtrl($scope) { $scope.range = function(n) { return new Array(n); }; }; 

    Eu acho que este jsFiddle deste tópico pode ser o que você está procurando.

     
    {{item.name}}

    Eu tive o mesmo problema. Eu me deparei com este tópico, mas não gostei dos methods que eles tinham aqui. Minha solução estava usando o underscore.js, que já instalamos. É tão simples assim:

     
    • {{n}}

    Isso fará exatamente o que você está procurando.

    Eu queria manter meu html muito minimal, então defini um pequeno filtro que cria o array [0,1,2, …] como outros fizeram:

     angular.module('awesomeApp') .filter('range', function(){ return function(n) { var res = []; for (var i = 0; i < n; i++) { res.push(i); } return res; }; }); 

    Depois disso, na visão é possível usar assim:

     
    • {{i+1}}

    Uma abordagem mais simples seria (por exemplo, 5 vezes):

     
    ...

    Isso é realmente FEIO, mas funciona sem um controlador para um inteiro ou variável:

    inteiro:

     {{$index}} 

    variável:

     {{$index}} 

    Existem diversas formas de fazer isto. Eu estava realmente incomodado em ter a lógica no meu controlador, então criei uma diretiva simples para resolver o problema de repetir um elemento n vezes.

    Instalação:

    A diretiva pode ser instalada usando o bower install angular-repeat-n

    Exemplo:

     {{$index}} 

    produz: 1234

    Também funciona usando uma variável de escopo:

      

    Fonte:

    Github

    Esta é apenas uma pequena variação na resposta aceita, mas você não precisa realmente criar uma nova function. Apenas para importar ‘Array’ no escopo:

     
    • {{$index+1}}
     var app = angular.module('myapp',[]); app.controller('ctrlParent',function($scope){ $scope.myNumber = 5; $scope.counter = Array; }); 

    Veja este violino para um exemplo ao vivo.

    Resposta mais fácil: 2 linhas de código

    JS (no seu controlador 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

     

    … onde repeatCount é o número de repetições que devem aparecer neste local.

    angular dá uma function muito doce chamada fatia .. usando isso você pode conseguir o que você está procurando. eg ng-repeat = “ab em abc.slice (startIndex, endIndex)”

    Esta demo: http://jsfiddle.net/sahilosheal/LurcV/39/ irá ajudá-lo e dizer-lhe como usar essa function “facilitando a vida”. 🙂

    html:

     

    sliced list(conditional NG-repeat)

    • {{$index+1}} :: {{ab.name}}

    unsliced list( no conditional NG-repeat)

    • {{$index+1}} :: {{ab.name}}

    CSS:

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

    ng-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'}]; } 

    Aqui está uma resposta para o 1.2.x angular

    Basicamente é o mesmo, com a ligeira modificação do ng-repeat

     
  • aqui está o violino: http://jsfiddle.net/cHQLH/153/

    Isso ocorre porque o angular 1.2 não permite valores duplicados na diretiva. Isto significa que se você está tentando fazer o seguinte, você receberá um erro.

     
  • Você pode usar a diretiva ng-if com ng-repeat

    Então, se num é o número de vezes que você precisa do elemento repetido:

     
  • Para usuários que usam o CoffeeScript, você pode usar uma compreensão de intervalo:

    Directiva

     link: (scope, element, attrs) -> scope.range = [1..+attrs.range] 

    ou controlador

     $scope.range = [1..+$someVariable] $scope.range = [1..5] # Or just an integer 

    Modelo

     
    [ the rest of your code ]

    Primeiro, crie um filtro angular usando o LoDash:

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

    A function LoDash times é capaz de lidar com números nulos, indefinidos, 0, números e cadeias de caracteres.

    Em seguida, use-o no seu HTML como este:

        

    ou

        

    Você pode usar este exemplo.

    Controlador interno:

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

    Exemplo para o elemento select no lado do código HTML:

      

    Se n não for muito alto, outra opção poderia ser usar split (”) com uma string de n caracteres:

     
    {{$index}}

    Expandindo um pouco a primeira resposta de Ivan um pouco, você pode usar uma string como uma coleção sem track by statement, desde que os caracteres sejam únicos, então se o caso de uso tiver menos que 10 números, como é a pergunta :

     
    • {{n}}

    Que é um pouco brega, claro, mas simples o suficiente para olhar e não particularmente confuso.

    Eu precisava de uma solução mais dinâmica para isso – onde eu poderia incrementar a repetição.

    HTML

     

    Controle de duplicador

      Create another user with the same permissions  

    JS

      $scope.newUserCount = Array('1'); var primaryValue = 1; $scope.duplicateUser = function() { primaryValue++; $scope.newUserCount.push(primaryValue) } 

    Angular fornece filtros para modificar uma coleção. Nesse caso, a coleção seria nula, ou seja, [], e o filtro também recebe argumentos, da seguinte maneira:

     
    • {{$index}}

    JS:

     module.filter('fixedNumber', function() { return function(emptyarray, number) { return Array(number); } }); module.controller('myCtrl', ['$scope', function($scope) { $scope.number = 5; }]); 

    Este método é muito semelhante aos propostos acima e não é necessariamente superior, mas mostra o poder dos filtros no AngularJS.

    Eu encontrei o mesmo problema e é com isso que eu saí:

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

    … e o html:

     
    {{ $index }}

    EXEMPLO AO VIVO

    Eu usei o times de sublinhado como function onde já estamos usando no projeto, mas você pode facilmente replace isso com o código nativo.

    Eu estou criando uma diretiva reutilizável onde o número máximo virá de outro ng-repeat. Então, esta é uma edição sobre a resposta mais votada.

    Basta alterar o código no controlador para isso –

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

    Isso retornará uma nova matriz com o número especificado de iterações

    desde a iteração através de uma string, ele renderizará um item para cada caractere:

     
  • {{$index}} //THIS DOESN'T ANSWER OP'S QUESTION. Read below.
  • podemos usar essa solução feia, mas sem código, usando o filtro nativo number|n decimal places .

      
  • {{$index}}
  • Dessa forma, teremos elementos mynumber sem código extra. Diga '0.000' .
    Usamos mynumber - 2 para compensar 0.
    Não funcionará para números abaixo de 3, mas pode ser útil em alguns casos.

    maneira simples:

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

    no componente / controlador e, em seguida:

      

    Este código é do meu projeto datilografado, mas poderia ser reorganizado para javascript puro