Vamos a aprender ha hacer tablas con angularjs y utilizando su directiva ng-repeat.
Para ello vamos a utilizar el mismo objeto JSON que hemos utilizado en el articulo anterior; $http
Como podemos ver en el siguiente código, hacer una tabla en angular, es realmente sencillo:
Es así de simple, ya que la llamada a las cadenas en la repeticion se hace en cada celda y se van mostrando por columnas, dando una presencia mucho más atractiva a nuestra presentación, pero naturalmente se le pueden hacer muchas cosas más, ya que esta tabla responde a los estilos css que queramos ponerle y a los filtros, como vemos en este ejemplo completo:
Una vez que entramos en la tabla podemos observar como en la directiva ng-repeat, utiliza una tubería para ordenar por país todos los casos, y dentro de la llamada a los paises se añade otro filtro para que aparezcan los nombres de los paises en mayúscula.
Para ello vamos a utilizar el mismo objeto JSON que hemos utilizado en el articulo anterior; $http
Como podemos ver en el siguiente código, hacer una tabla en angular, es realmente sencillo:
<!DOCTYPE html>
<html>
<body>
<div ng-app="" ng-controller="customersController">
<table>
<tr><td><b>Nombre</b></td><td><b>País</b></td></tr>
<tr ng-repeat="x in names">
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>
</div>
<script>
function customersController($scope,$http) {
$http.get("http://www.w3schools.com/website/Customers_JSON.php")
.success(function(response) {$scope.names = response;});
}
</script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>
Es así de simple, ya que la llamada a las cadenas en la repeticion se hace en cada celda y se van mostrando por columnas, dando una presencia mucho más atractiva a nuestra presentación, pero naturalmente se le pueden hacer muchas cosas más, ya que esta tabla responde a los estilos css que queramos ponerle y a los filtros, como vemos en este ejemplo completo:
<!DOCTYPE html>
<html>
<head>
<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f1f1f1;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
</head>
<body>
<div ng-app="" ng-controller="customersController">
<table>
<tr ng-repeat="x in names | orderBy : 'Country'">
<td>{{ x.Name }}</td>
<td>{{ x.Country | uppercase}}</td>
</tr>
</table>
</div>
<script>
function customersController($scope,$http) {
$http.get("http://www.w3schools.com/website/Customers_JSON.php")
.success(function(response) {$scope.names = response;});
}
</script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>
Podemos observar viendo el código, que en el head se ha introducido un estilo css (lo recomendable es que el estilo se encuentre en un archivo aparte pero para ejemplo es más didactico tenerlo aquí), en el cual se se muestra el borde y el sombreado.Una vez que entramos en la tabla podemos observar como en la directiva ng-repeat, utiliza una tubería para ordenar por país todos los casos, y dentro de la llamada a los paises se añade otro filtro para que aparezcan los nombres de los paises en mayúscula.
No hay comentarios:
Publicar un comentario