Existe uma maneira de ng-repeat
um número definido de vezes, em vez de sempre ter que repetir uma matriz?
Por exemplo, abaixo, quero que o item da lista seja exibido 5 vezes, assumindo $scope.number
igual a 5, além de aumentar o número, de modo que cada item da lista aumente como 1, 2, 3, 4, 5
Resultado desejado:
<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
fonte
fonte
Respostas:
Atualização (25/09/2018)
As versões mais recentes do AngularJS (> = 1.3.0) permitem fazer isso apenas com uma variável (nenhuma função é necessária):
Isso não foi possível no momento em que a pergunta foi feita pela primeira vez. Agradecemos a @Nikhil Nambiar por sua resposta abaixo para esta atualização
Original (29/5/2013)
No momento,
ng-repeat
apenas aceita uma coleção como parâmetro, mas você pode fazer isso:E em algum lugar do seu controlador:
Isso permitirá que você altere
$scope.number
para qualquer número que desejar e ainda mantenha a ligação que está procurando.EDIT (1/6/2014) - As versões mais recentes do AngularJS (> = 1.1.5) requerem
track by $index
:Aqui está um violino com algumas listas usando a mesma
getNumber
função.fonte
você consegue fazer isso:
fonte
Aqui está um exemplo de como você pode fazer isso. Observe que fui inspirado por um comentário nos documentos ng-repeat: http://jsfiddle.net/digitalzebra/wnWY6/
Observe a diretiva ng-repeat:
Aqui está o controlador:
fonte
_.range
Underscore ou lodash para criar a matriz: $ scope.range = _.range (0, n);Eu acho que este jsFiddle a partir desta discussão pode ser o que você está procurando.
fonte
$scope.number
igual a 5". A intenção era usar uma variável inteira para definir a contagem de itens, não codificá-la e não usar uma matriz predefinida.$scope.limit = 2
) e usá-lo como...|limitTo:limit
- veja fiddle atualizadosUma abordagem mais simples seria (por exemplo, 5 vezes):
fonte
Array(5)
(ou mesmo[...Array(5).keys()]
para obter uma matriz [0,1,2,3,4])Eu tive o mesmo problema. Me deparei com esse tópico, mas não gostei dos métodos que eles tinham aqui. Minha solução estava usando underscore.js, que já tínhamos instalado. É simples assim:
Isso fará exatamente o que você está procurando.
fonte
$scope._ = _
.$rootScope
para que possa ser usado em qualquer lugar. Coloque isso em suaapp.run
função logo após oapp.config
:app.run(function ($rootScope) { $rootScope._ = _; });
Eu queria manter meu html muito mínimo, então defini um pequeno filtro que cria a matriz [0,1,2, ...] como outros fizeram:
Depois disso, na visualização é possível usar assim:
fonte
Isso é realmente FEIO, mas funciona sem um controlador para um número inteiro ou variável:
inteiro:
variável:
fonte
_ in (_ = []).length = 33; _ track by $index
Um pouco menorExistem diversas formas de fazer isto. Eu estava realmente preocupado 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
bower install angular-repeat-n
Exemplo:
produz:
1234
Também funciona usando uma variável de escopo:
Fonte:
Github
fonte
Essa é apenas uma pequena variação na resposta aceita, mas você realmente não precisa criar uma nova função. Apenas para importar 'Matriz' no escopo:
Veja este violino para um exemplo ao vivo.
fonte
Resposta mais fácil: 2 linhas de código
JS (no seu controlador AngularJS)
HTML
... onde
repeatCount
está o número de repetições que devem aparecer neste local.fonte
repeatCount
por um número real no HTML e, desde que esse número seja menor ou igual aMAX_REPEATS
, isso permitirá que você defina o número de repetições no HTML.ngRepeat
diretiva. O uso deArray.prototype.slice
JS idiomático deve sempre ser escolhido em uma biblioteca como underscore.js (dependendo da compatibilidade do navegador).angular fornece uma função muito interessante chamada fatia . Usando isso, você pode conseguir o que está procurando. por exemplo, ng-repeat = "ab em abc.slice (startIndex, endIndex)"
esta demonstração: http://jsfiddle.net/sahilosheal/LurcV/39/ ajudará você e informará como usar essa função "facilitar a vida". :)
html:
CSS:
ng-JS:
fonte
Heres uma resposta para angular 1.2.x
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. Isso significa que se você estiver tentando fazer o seguinte, receberá um erro.
fonte
Você pode usar a
ng-if
diretiva comng-repeat
Portanto, se num é o número de vezes que você precisa que o elemento seja repetido:
fonte
ng-repeat
dessa maneira ainda produzirá as tags comentadas (<!-- ngIf: $index < num -->
etc.). Simplesmente não haveráli
elementos para o DOM renderizar. Verifique uma "fonte de exibição" no painel de resultados aqui para ver o que quero dizer.Você pode usar este exemplo.
Controlador interno:
Exemplo para o elemento select no lado do código HTML:
fonte
Para usuários que usam o CoffeeScript, você pode usar uma compreensão de intervalo:
Directiva
ou Controlador
Modelo
fonte
Expandindo um pouco a primeira resposta de Ivan, você pode usar uma string como a coleção sem uma faixa por declaração, desde que os caracteres sejam únicos; portanto, se o caso de uso for menor que 10 números, é a pergunta que eu faria simplesmente :
O que é um pouco instável, claro, mas simples o suficiente para ser visto e não particularmente confuso.
fonte
Primeiro, crie um filtro angular usando o LoDash:
A função LoDash times é capaz de manipular representação nula, indefinida, 0, números e sequência de números.
Em seguida, use-o no seu HTML como este:
ou
fonte
Eu precisava de uma solução mais dinâmica para isso - onde eu pudesse incrementar a repetição.
HTML
Controle do duplicador
JS
fonte
Angular fornece filtros para modificar uma coleção. Nesse caso, a coleção seria nula, ou seja, [], e o filtro também recebe argumentos, como a seguir:
JS:
Esse método é muito semelhante aos propostos acima e não é necessariamente superior, mas mostra o poder dos filtros no AngularJS.
fonte
Se n não for muito alto, outra opção poderia ser usar split ('') com uma sequência de n caracteres:
fonte
Eu encontrei o mesmo problema e foi isso que eu descobri:
... e o html:
EXEMPLO AO VIVO
Usei a
times
função de sublinhado como já a usamos no projeto, mas você pode substituí-la facilmente por código nativo.fonte
Estou criando uma diretiva reutilizável em que o número máximo virá de outro ng-repeat. Portanto, esta é uma edição da melhor resposta votada.
Apenas mude o código no controlador para isso -
Isso retornará uma nova matriz com número especificado de iterações
fonte
desde que iterou sobre uma string, ele renderizará um item para cada caractere:
podemos usar essa solução alternativa feia, mas sem código, usando o
number|n decimal places
filtro nativo.Dessa forma, teremos
mynumber
elementos sem código extra. Diga'0.000'
.Usamos
mynumber - 2
para compensar0.
. Não funcionará para números abaixo de 3, mas pode ser útil em alguns casos.
fonte
track by $index
?ng-repeat="i in [1,2,3,4]"
$scope.number
aaaa
foi um exemplo para explicar minha solução alternativa, não muito elegante. Usando 'aaaa' ou 'abcd' codificado, você obtém uma lista de tamanho fixo, mas adicionandomynumber-2
decimais a 0, obtém uma 'string' commynumber
caracteres. Digamosmynumber=5
, entendemos'0.000'
, e iteramos isso usando o índice $fonte
maneira simples:
no componente / controlador e, em seguida:
Este código é do meu projeto datilografado, mas pode ser reorganizado para javascript puro
fonte