¿Cómo iterar sobre las claves y valores con ng-repeat en AngularJS?

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=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js">
    </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=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js">
    </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:

Publicación traducida automáticamente

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

Deja una respuesta Cancelar la respuesta