Angular fornece algum suporte para um loop for usando números dentro de suas diretivas HTML:
do something
Mas se sua variável de escopo include um intervalo que tenha um número dynamic, você precisará criar um array vazio a cada vez.
No controlador
var range = []; for(var i=0;i<total;i++) { range.push(i); } $scope.range = range;
No HTML
do something
Isso funciona, mas é desnecessário, já que não usaremos o array de alcance de maneira alguma dentro do loop. Alguém sabe de definir um intervalo ou regular para o valor min / max?
Algo como:
do something
Eu ajustei esta resposta um pouco e inventei este violino .
Filtro definido como:
var myApp = angular.module('myApp', []); myApp.filter('range', function() { return function(input, total) { total = parseInt(total); for (var i=0; i
Com a repetição usada assim:
do something
Eu criei uma versão ainda mais simples, para criar um intervalo entre dois números definidos, por exemplo. 5 a 15
Veja demo no JSFiddle
HTML :
- Number {{n}}
Controlador :
$scope.range = function(min, max, step) { step = step || 1; var input = []; for (var i = min; i <= max; i += step) { input.push(i); } return input; };
Nada além de Javascript simples (você nem precisa de um controlador):
{{ $index }}
Muito útil quando mockuping
Eu criei uma syntax ligeiramente diferente que combina comigo um pouco mais e adiciona um limite inferior opcional também:
myApp.filter('makeRange', function() { return function(input) { var lowBound, highBound; switch (input.length) { case 1: lowBound = 0; highBound = parseInt(input[0]) - 1; break; case 2: lowBound = parseInt(input[0]); highBound = parseInt(input[1]); break; default: return input; } var result = []; for (var i = lowBound; i <= highBound; i++) result.push(i); return result; }; });
que você pode usar como
Do something 0..9: {{n}}
ou
Do something 20..29: {{n}}
Para aqueles que são novos no angularjs. O índice pode ser obtido usando $ index.
Por exemplo:
do something number {{$index}}
O que, quando você estiver usando o prático filtro do Gloopy, imprime:
faça algo numero 0
faça algo número 1
faça algo numero 2
faça algo numero 3
faça algo número 4
faça algo número 5
faça algo número 6
faça algo numero 7
faça algo numero 8
faça algo número 9
Uma maneira curta de fazer isso seria usar o método _.range () do Underscore.js. 🙂
http://underscorejs.org/#range
// declare in your controller or wrap _.range in a function that returns a dynamic range. var range = _.range(1, 11); // val will be each number in the array not the index. {{ $index }}: {{ val }}
Eu uso minha diretiva ng-repeat-range
:
/** * Ng-Repeat implementation working with number ranges. * * @author Umed Khudoiberdiev */ angular.module('commonsMain').directive('ngRepeatRange', ['$compile', function ($compile) { return { replace: true, scope: { from: '=', to: '=', step: '=' }, link: function (scope, element, attrs) { // returns an array with the range of numbers // you can use _.range instead if you use underscore function range(from, to, step) { var array = []; while (from + step <= to) array[array.length] = from += step; return array; } // prepare range options var from = scope.from || 0; var step = scope.step || 1; var to = scope.to || attrs.ngRepeatRange; // get range of numbers, convert to the string and add ng-repeat var rangeString = range(from, to + 1, step).join(','); angular.element(element).attr('ng-repeat', 'n in [' + rangeString + ']'); angular.element(element).removeAttr('ng-repeat-range'); $compile(element)(scope); } }; }]);
e o código html é
Hello 4 times!
ou simplesmente
Hello 5 times!
ou simplesmente
Hello 3 times!
ou apenas
Hello 7 times!
A mais simples solução de código era iniciar um array com o intervalo e usar o $ index + por mais que eu quisesse compensar por:
Você pode usar filtros ‘after’ ou ‘before’ no módulo angular.filter ( https://github.com/a8m/angular-filter )
$scope.list = [1,2,3,4,5,6,7,8,9,10]
HTML:
{{ i }}
resultado: 5, 6, 7, 8, 9, 10
O código abaixo define um range()
método range()
disponível para todo o escopo do seu aplicativo MyApp
. Seu comportamento é muito semelhante ao método range()
do Python.
angular.module('MyApp').run(['$rootScope', function($rootScope) { $rootScope.range = function(min, max, step) { // parameters validation for method overloading if (max == undefined) { max = min; min = 0; } step = Math.abs(step) || 1; if (min > max) { step = -step; } // building the array var output = []; for (var value=min; value
Com um parâmetro:
{{ i }},
0, 1, 2,
Com dois parâmetros:
{{ i }},
1, 2, 3, 4,
Com três parâmetros:
{{ i }},
-2, -1.5, -1, -0.5, 0, 0.5,
JS (no seu controlador AngularJS)
$scope.range = new Array(MAX_REPEATS); // MAX_REPEATS should be the most repetitions you will ever need in a single ng-repeat
HTML
… onde myCount
é o número de estrelas que devem aparecer neste local.
Você pode usar $index
para qualquer operação de rastreamento. Por exemplo, se você quiser imprimir alguma mutação no índice, você pode colocar o seguinte no div
:
{{ ($index + 1) * 0.5 }}
Sem qualquer alteração no seu controlador, você pode usar isto:
ng-repeat="_ in ((_ = []) && (_.length=51) && _) track by $index"
Apreciar!
Usando UnderscoreJS:
angular.module('myModule') .run(['$rootScope', function($rootScope) { $rootScope.range = _.range; }]);
Aplicando isso ao $rootScope
ele fica disponível em todos os lugares:
{{x}}
Muito simples:
$scope.totalPages = new Array(10);
Definir escopo no controlador
var range = []; for(var i=20;i<=70;i++) { range.push(i); } $scope.driverAges = range;
Definir Repetição no Arquivo de Modelo Html
Uma melhoria para a solução da @Mormegil
app.filter('makeRange', function() { return function(inp) { var range = [+inp[1] && +inp[0] || 0, +inp[1] || +inp[0]]; var min = Math.min(range[0], range[1]); var max = Math.max(range[0], range[1]); var result = []; for (var i = min; i <= max; i++) result.push(i); if (range[0] > range[1]) result.reverse(); return result; }; });
uso
3 2 1 0 -1 -2 -3
-3 -2 -1 0 1 2 3
0 1 2 3
0 -1 -2 -3
Eu tentei o seguinte e funcionou muito bem para mim:
{{position}}
Angular 1.3.6
Esta é a resposta melhorada do jzm (não posso comentar mais eu gostaria de comentar sua resposta porque ele / ela incluiu erros). A function tem um valor inicial / final do intervalo, por isso é mais flexível e … funciona. Este caso particular é para o dia do mês:
$scope.rangeCreator = function (minVal, maxVal) { var arr = []; for (var i = minVal; i <= maxVal; i++) { arr.push(i); } return arr; };
Oi você pode conseguir isso usando html puro usando AngularJS (NO directiva é necessária!)
{{ person.first + ' ' + person.last }}
Eu peguei isso e vi que poderia ser útil para alguns. (Sim, CoffeeScript. Me processe.)
app.directive 'times', -> link: (scope, element, attrs) -> repeater = element.html() scope.$watch attrs.times, (value) -> element.html '' return unless value? element.html Array(value + 1).join(repeater)
Usar:
Tarde para a festa. Mas acabei apenas fazendo isso:
No seu controlador:
$scope.repeater = function (range) { var arr = []; for (var i = 0; i < range; i++) { arr.push(i); } return arr; }
Html:
Se você quiser conseguir isso em html sem qualquer controlador ou fábrica.
Esta é a variante mais simples: use array de inteiros ….
test {{n}}
- Angularjs: input ngChange é acionado enquanto o valor está mudando
- AngularJS: $ viewContentLoaded acionado antes da exibição parcial aparecer
- O que exatamente você faz com a function transclude e a function de vinculação de clone?
- AngularJS faz upload de vários arquivos com a API FormData
- Aplicar atributo de estilo CSS dinamicamente no Angular JS
- Tabelas de vários níveis (dentro de outra se clicadas)
- Como faço para obter autenticação básica trabalhando em angularjs?
- AngularJS passando dados para $ http.get request