¿Forma de ng-repetir el número de veces definido en lugar de repetir sobre el conjunto?

¿Hay alguna manera de ng-repetir un número definido de veces en lugar de tener que iterar siempre sobre una matriz?

Por ejemplo, a continuación, quiero que el elemento de la lista se muestre 5 veces, suponiendo $scope.number igual a 5 además de incrementar el número para que cada elemento de la lista se incremente como 1, 2, 3, 4, 5

Resultado deseado:

 
  • 1
  • 2
  • 3
  • 4
  • 5

Por el momento, ng-repeat solo acepta una colección como parámetro, pero puedes hacer esto:

 
  • {{$index+1}}

Y en algún lugar de tu controlador:

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

Esto le permitirá cambiar $scope.number a cualquier número como lo desee y aún así mantener el enlace que está buscando.

Aquí hay un violín con un par de listas que usan la misma función getNumber .

EDITAR 1/6/2014 : Las versiones más nuevas de Angular utilizan la siguiente syntax:

 
  • Puedes hacerlo:

     
    ...

    Aquí hay un ejemplo de cómo puedes hacer esto. Tenga en cuenta que me inspiré en un comentario en los documentos ng-repeat: http://jsfiddle.net/digitalzebra/wnWY6/

    Tenga en cuenta la directiva ng-repeat:

     
    {{$index + 1}}

    Aquí está el controlador:

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

    Creo que este jsFiddle de este hilo podría ser lo que estás buscando.

     
    {{item.name}}

    Me encontré con el mismo problema. Encontré este hilo, pero no me gustaron los métodos que tenían aquí. Mi solución fue el uso de underscore.js, que ya habíamos instalado. Es tan simple como esto:

     
    • {{n}}

    Esto hará exactamente lo que estás buscando.

    Quería mantener mi html muy mínimo, así que definí un pequeño filtro que crea la matriz [0,1,2, …] como otros lo han hecho:

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

    Después de eso, en la vista es posible usar así:

     
    • {{i+1}}

    Un enfoque más simple sería (por ejemplo, 5 veces):

     
    ...

    Esto es realmente feo, pero funciona sin un controlador para un número entero o una variable:

    entero:

     {{$index}} 

    variable:

     {{$index}} 

    Hay muchas maneras de hacer esto. Realmente me molestó tener la lógica en mi controlador, así que creé una directiva simple para resolver el problema de repetir un elemento n veces.

    Instalación:

    La directiva se puede instalar usando bower install angular-repeat-n

    Ejemplo:

     {{$index}} 

    produce: 1234

    También funciona usando una variable de ámbito:

      

    Fuente:

    Github

    Esta es solo una pequeña variación en la respuesta aceptada, pero realmente no necesita crear una nueva función. Solo para importar ‘Matriz’ en el scope:

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

    Vea este violín para un ejemplo en vivo.

    La respuesta más fácil: 2 líneas de código

    JS (en su 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

     

    … donde repeatCount es el número de repeticiones que deberían aparecer en esta ubicación.

    angular da una función muy dulce llamada slice … usando esto puedes lograr lo que estás buscando. por ejemplo ng-repeat = “ab en abc.slice (startIndex, endIndex)”

    esta demostración: http://jsfiddle.net/sahilosheal/LurcV/39/ te ayudará y te dirá cómo usar esta función de “hacer la vida más fácil”. 🙂

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

    Aquí hay una respuesta para angular 1.2.x

    Básicamente es lo mismo, con la ligera modificación de ng-repeat

     
  • aquí está el violín: http://jsfiddle.net/cHQLH/153/

    esto es porque angular 1.2 no permite valores duplicados en la directiva. Esto significa que si intenta hacer lo siguiente, obtendrá un error.

     
  • Puede usar la directiva ng-if con ng-repeat

    Entonces, si num es la cantidad de veces que necesita que el elemento se repita:

     
  • Para usuarios que usan CoffeeScript, puede usar una comprensión de rango:

    Directiva

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

    o controlador

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

    Modelo

     
    [ the rest of your code ]

    Primero, crea un filtro angular usando LoDash:

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

    La función de tiempos LoDash es capaz de manejar nulos, indefinidos, 0, números y representación de números de cadena.

    Luego, úsalo en tu HTML como este:

        

    o

        

    Puedes usar este ejemplo.

    Controlador interno:

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

    Ejemplo de elemento seleccionado en el lado del código HTML:

      

    Si n no es demasiado alto, otra opción podría ser usar split (”) con una cadena de n caracteres:

     
    {{$index}}

    Ampliando un poco la primera respuesta de Ivan un poco, puede usar una cadena como la colección sin una pista por statement, siempre y cuando los caracteres sean únicos, de modo que si el caso de uso es menor de 10 números, la pregunta simplemente lo haría :

     
    • {{n}}

    Que es un poco jenky, seguro, pero lo suficientemente simple como para mirar y no particularmente confuso.

    Necesitaba una solución más dinámica para esto, donde podría incrementar la repetición.

    HTML

     

    Control 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 proporciona filtros para modificar una colección. En este caso, la colección sería nula, es decir [], y el filtro también toma argumentos, de la siguiente manera:

     
    • {{$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 es muy similar a los propuestos anteriormente y no es necesariamente superior, pero muestra el poder de los filtros en AngularJS.

    Encontré el mismo problema y esto es con lo que salí:

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

    … y el html:

     
    {{ $index }}

    EJEMPLO EN VIVO

    Utilicé la función de subrayado como la usamos en el proyecto, pero puede reemplazarla fácilmente con código nativo.

    Estoy creando una directiva reutilizable donde el número máximo vendrá de otra ng-repeat. Entonces, esta es una edición sobre la mejor respuesta.

    Simplemente cambie el código en el controlador a este –

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

    Esto devolverá una nueva matriz con el número especificado de iteraciones

    ya que al iterar sobre una cadena se renderizará un ítem para cada char:

     
  • {{$index}} //THIS DOESN'T ANSWER OP'S QUESTION. Read below.
  • podemos usar esta solución fea pero sin código usando el filtro nativo number|n decimal places .

      
  • {{$index}}
  • de esta forma tendremos elementos mynumber sin código adicional. Diga '0.000' .
    Usamos mynumber - 2 para compensar 0.
    No funcionará para números por debajo de 3, pero podría ser útil en algunos casos.

    manera simple:

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

    en el componente / controlador y luego:

      

    Este código es de mi proyecto typescript, pero podría reorganizarse en javascript puro