La tarea es iterar sobre un objeto JS (sus claves y valores) usando la directiva ng-repeat. Esto se puede hacer usando paréntesis en la directiva ng-repeat para solicitar explícitamente un parámetro de par clave-valor de angularJS. Aquí la clave variable contiene la clave del objeto y el valor contiene el valor del objeto.
Sintaxis:
<element ng-repeat="(key, value) in JSObject"> Contents... </element>
Ejemplo 1: En este ejemplo, simplemente mostraremos todas las claves y valores de un objeto JS usando ng-repeat. En la primera iteración, clave = nombre y valor = «GeeksforGeeks». En la segunda iteración, clave = ubicación y valor = «Noida India Sector 136″… Esto continúa iterando hasta que todas las claves y sus valores se cubren al menos una vez de forma similar a un bucle for-each.
- Programa:
<!DOCTYPE html>
<
html
ng-app
=
"myApp"
>
<
head
>
<
script
src
=
</
script
>
</
head
>
<
body
ng-controller
=
"MyController"
>
<
center
>
<
h1
style
=
"color: green;"
>
GeeksforGeeks
</
h1
>
<
div
ng-repeat
=
"(key, value) in gfg"
>
<!-- First Iteration-->
<
p
>{{key}} - {{value}}</
p
>
</
div
>
</
center
>
</
body
>
<
script
type
=
"text/javascript"
>
var myApp = angular.module('myApp', []);
myApp.controller('MyController', ['$scope', function($scope) {
$scope.gfg = {
Name: "GeeksforGeeks",
Location: "Noida India Sector 136",
Type: "Edu-Tech",
}
}]);
</
script
>
</
html
>
- Salida: al cargar la página, vemos que todos los pares clave-valor de los objetos ya están enumerados allí. Esto se debe a que ng-repeat se llama al cargar a medida que se carga el HTML.
Ejemplo 2: En este ejemplo, recorreremos un objeto anidado usando la directiva ng-repeat. En la primera iteración, clave = diamante y valor = {dureza: «Ultra duro», bueno para: «Pantalla, corte»} en la siguiente iteración clave = oro y valor es su objeto respectivo. Esto continúa iterando como un bucle for-each sobre los pares clave-valor de los materiales del objeto.
- Programa:
<!DOCTYPE html>
<
html
ng-app
=
"myApp"
>
<
head
>
<
script
src
=
</
script
>
</
head
>
<
body
ng-controller
=
"MyController"
>
<
center
>
<
h1
style
=
"color: green;"
>
GeeksforGeeks
</
h1
>
<
div
ng-repeat
=
"(key, value) in materials"
>
<
h1
>{{key}}</
h1
>
<
div
ng-repeat
=
"(key1, value1) in value"
>
<!-- since the "value" variable itself is
an object. We can iterate over its keys
and values again using ng-repeat. -->
<
p
>{{key1}} - {{value1}}</
p
>
</
div
>
</
div
>
</
center
>
</
body
>
<
script
type
=
"text/javascript"
>
var myApp = angular.module('myApp', []);
myApp.controller('MyController', ['$scope', function($scope) {
$scope.materials = {
diamond: {
hardness: "Ultra Hard",
goodFor: "Display, cutting"
},
gold: {
hardness: "Hard",
goodFor: "Jewelry"
},
silver: {
hardness: "comparatively soft",
goodFor: "Jewelry, Display"
}
}
}]);
</
script
>
</
html
>
- Producción: