En JavaScript, los datos se pueden almacenar en forma de arrays. Cada uno de los elementos de la array tiene una indexación única, comenzando desde 0. Pero, ¿qué pasa si el desarrollador desea mostrar todos los elementos que están en la array en la página web? Una forma posible es ejecutar un ciclo, comenzando desde 0 hasta el valor de (array.length() – 1) . Sin embargo, esto no es factible cuando se trata de datos JSON, donde podría existir otra array dentro de una array ya existente.
AngularJS ha proporcionado la mejor solución posible para esto.
Una array se puede imprimir en formato tabular usando la directiva ‘ng-repeat’ de AngularJS.
‘ng-repeat’ ayuda a recorrer los elementos en el elemento de colección. Esta directiva es muy útil cuando se trata de una colección de objetos.
Ejemplo 1:
<!DOCTYPE html>
<html>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<style>
body {
margin: 2%;
font-size: 120%;
}
th,
td {
padding: 20px;
}
</style>
<body ng-app="myApp" ng-controller="ListController">
<h1>Most Grand Slam Winners - Men Tennis</h1>
<table border=1>
<thead>
<tr>
<th>S.No</th>
<th>Name</th>
<th>Country</th>
<th>Grand Slams</th>
<th>Active</th>
</tr>
</thead>
<tr ng-repeat="item in itemsDetails">
<td> {{item.sno}} </td>
<td> {{item.name}} </td>
<td> {{item.country}} </td>
<td> {{item.grandslams}} </td>
<td> {{item.active}} </td>
</tr>
</table>
</body>
<script>
var app = angular.module('myApp', []);
app.controller(
'ListController', function($scope) {
$scope.itemsDetails = [{
sno: 1,
name: 'Roger Federer',
country: 'Switzerland',
grandslams: 20,
active: "Yes",
}, {
sno: 2,
name: 'Rafael Nadal',
country: 'Spain',
grandslams: 18,
active: "Yes",
}, {
sno: 3,
name: 'Novak Djokovic',
country: 'Serbia',
grandslams: 16,
active: "Yes",
}, {
sno: 4,
name: 'Pete Samprass',
country: 'USA',
grandslams: 14,
active: "No",
}, {
sno: 5,
name: 'Roy Emerson',
country: 'Australia',
grandslams: 12,
active: "No",
}
];
});
</script>
</html>
Producción
Explicación del código:
la ‘ng-app’ y el ‘ng-controller’ de esta aplicación se han denominado ‘myApp’ y ‘ListController’ respectivamente.
En el <script>, se ha creado y almacenado en la variable de alcance una array llamada ‘itemsDetails’ . La array contiene una lista de los ‘Top 5 ganadores de Grand Slam en tenis masculino’.
El objetivo principal es imprimir esta array de datos en formato tabular.
El primer paso es crear una tabla usando las etiquetas ‘table’ , ‘thead’ , ‘tr’ , ‘td’ . Los encabezados de la tabla están establecidos. El servicio ng-repeat de AngularJS para extraer múltiples registros de la array.
La sintaxis básica de ‘ng-repeat’ es:
<div ng-repeat="x in list">
{{x}}
</div>
En el ejemplo, la sintaxis se ha modificado como ng-repeat=”item en itemsDetails . Por lo tanto, cada elemento de los ‘itemsDetails’ se identificará como ‘item’ . La notación de puntos de JavaScript se utilizará para acceder a la información dentro de la array. Por ejemplo, para acceder a la información almacenada en ‘nombre’ , se utilizará la notación de punto ‘elementosDetalles.nombre’ . El siguiente paso es escribir esa notación de puntos dentro de corchetes dobles {{}} , por ejemplo; {{elementosDetalles.nombre}} . AngularJS luego resuelve esta expresión y devuelve el resultado deseado.
‘ ng-repeat’ ejecutará este proceso en un bucle hasta que se seleccionen todos los elementos de la array y se devuelvan en formato tabular.
Ejemplo 2:
<!DOCTYPE html>
<html>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<style>
body {
margin: 2%;
font-size: 120%;
}
th,
td {
padding: 20px;
}
</style>
<body ng-app="myApp" ng-controller="ListController">
<h1>Superheroes and their Universe</h1>
<table border=1>
<thead>
<tr>
<th>Name</th>
<th>Universe</th>
</tr>
</thead>
<tr ng-repeat="item in itemsDetails">
<td> {{item.name}} </td>
<td> {{item.universe}} </td>
</tr>
</table>
</body>
<script>
var app = angular.module('myApp', []);
app.controller('ListController', function($scope) {
$scope.itemsDetails = [{
name: 'Batman',
universe: 'DC',
}, {
name: 'Ant Man',
universe: 'Marvel',
}, {
name: 'Superman',
universe: 'DC',
}, {
name: 'Captain America',
universe: 'Marvel',
}, {
name: 'Thor',
universe: 'Marvel',
}
];
});
</script>
</html>
Producción:
Explicación del código:
este ejemplo es muy similar al ejemplo anterior. En este caso, creamos una array y la llamamos ‘itemsDetails’ . Almacenaremos esta array en el objeto de alcance. El servicio ‘ng-repeat’ iterará a través de la array, obtendrá un elemento a la vez de la array y luego lo mostrará en la página web en formato tabular.
Publicación traducida automáticamente
Artículo escrito por sanchit496 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA