Directiva Angular-JS ng-repeat

La directiva ng-repeat de Angular-JS es una herramienta útil para repetir un conjunto de código HTML varias veces o una vez por elemento en una colección de elementos. ng-repeat se usa principalmente en arrays y objetos.
ng-repeat es similar a un bucle que tenemos en C, C++ u otros lenguajes, pero técnicamente instancia una plantilla (normalmente un conjunto de estructuras HTML) para cada elemento de una colección a la que accedemos. Angular mantiene una variable $index como clave para el elemento al que se accede actualmente y un usuario también puede acceder a esta variable.

Sintaxis:

<div ng-repeat="keyName in MyObjectName ">
  {{keyName}}
</div>

Aquí, «MyObjectName» es una colección que puede ser un objeto o una array y puede acceder a cada valor dentro de él usando un «keyName».

Ejemplo 1

Cree un archivo app.js para la aplicación.

var app = angular.module('myApp',[]);
  
app.controller('MainCtrl', function($scope){
    $scope.names = ['Adam','Steve','George','James','Armin'];
    console.log($scope.names);
});

Línea 1 : creó un módulo de aplicación llamado «myApp» sin dependencias.
Línea 3- Controlador principal de nuestra aplicación.
Línea 4- Array de strings «nombres».

Crear página index.html

<!DOCTYPE html>
<html ng-app="myApp">
<head>
     <title>Angular ng-repeat</title>
     <script> type="text/javascript" src="jquery-3.2.1.min.js">
                                                      </script>
     <script> type="text/javascript" src="angular.js"></script>
     <script> type="text/javascript" src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
     <h2>Here is the name list</h2>
     <ul>
        <li ng-repeat="name in names">
            {{name}}
        </li>
     </ul>
</body>
</html> 

Línea 5 : incluya todas las dependencias como jquery, angular-js y el archivo app.js.
Línea 12 : use la directiva ng-repeat para obtener un nombre de la array de nombres a la vez y mostrarlo.

Producción :

Ejemplo 2

archivo app.js

var app = angular.module('myApp',[]);



app.controller('MainCtrl', function($scope){

    $scope.strings= ['Geeks','For','Geeks'];

    console.log($scope.strings);

});

Tenemos una lista de tres strings.

índice.html

<!DOCTYPE html>
<html ng-app="myApp">
<head>
     <title>Angular ng-repeat</title>
     <script> type="text/javascript" src="jquery-3.2.1.min.js">
                                                      </script>
     <script> type="text/javascript" src="angular.js"></script>
     <script> type="text/javascript" src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
     <h2>Here is the string list</h2>
     <ul>
        <li ng-repeat="s in strings>
            {{name}}
        </li>
     </ul>
</body>
</html> 

Nota : aquí se usa «seguimiento por $index» porque hay entradas duplicadas en nuestra lista, es decir, «Geeks». No se permiten claves duplicadas porque AngularJS usa claves para asociar Nodes DOM con elementos. «seguimiento por $índice», hará que los elementos se clasifiquen por su posición en la array en lugar de su valor

Producción :

Aplicaciones:

ng-repeat se puede usar para iterar a través de una array que requiere menos líneas de código que el método javascript habitual.
Los filtros se pueden usar con ng-repeat para crear una barra de búsqueda fácil de implementar.

Referencias

Publicación traducida automáticamente

Artículo escrito por neerajnegi174 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta