Tablas AngularJS

La directiva ng-repeat es muy adecuada para mostrar tablas.

Mostrar datos en la tabla

Mostrar una tabla con AngularJS es muy simple:

Ejemplos AngularJS

<div ng-app="miApp" ng-controller="clientesCtrl">
<table>
  <tr ng-repeat="x in names">
    <td>{{ x.Nombre }}</td>
    <td>{{ x.Country }}</td>
  </tr>
</table>
</div>
<script>
var app = angular.module('miApp', []);
app.controller('clientesCtrl', function($scope, $http) {
  $http.get("clientes.php")
  .then(function (respuesta) {$scope.nombres = respuesta.data.registros;});
});
</script>

Prueba personalmente

Mostrar con estilos CSS

Para que se vea más bonito, puede agregar algunos estilos CSS a la página:

Estilos CSS

<style>
table, th , td {
  border: 1px solid gris;
  border-collapse: collapse;
  padding: 5px;
}
table tr:nth-child(odd) {
  background-color: #f1f1f1;
}
table tr:nth-child(even) {
  background-color: #ffffff;
}
</style>

Prueba personalmente

Mostrar con filtro ordenarPor

Para ordenar la tabla, agregue ordenarPor Filtro:

Ejemplo AngularJS

<table>
  <tr ng-repeat="x in nombres | ordenarPor : 'País'">
    <td>{{ x.Nombre }}</td>
    <td>{{ x.Country }}</td>
  </tr>
</table>

Prueba personalmente

Mostrar con filtro mayúsculas

Para mostrar en mayúsculas, agregue mayúsculas Filtro:

Ejemplo AngularJS

<table>
  <tr ng-repeat="x in names">
    <td>{{ x.Nombre }}</td>
    <td>{{ x.País | mayúsculas }}</td>
  </tr>
</table>

Prueba personalmente

Mostrar índice de tabla ($index)

Para mostrar el índice de la tabla, agregue una etiqueta con $index del <td>：

Ejemplo AngularJS

<table>
  <tr ng-repeat="x in names">
    <td>{{ $index + 1 }}</td>
    <td>{{ x.Nombre }}</td>
    <td>{{ x.Country }}</td>
  </tr>
</table>

Prueba personalmente

Uso de $even y $odd

Ejemplo AngularJS

<table>
  <tr ng-repeat="x in names">
    <td ng-if="$odd" style="background-color:#f1f1f1">{{ x.Name }}</td>
    <td ng-if="$even">{{ x.Name }}</td>
    <td ng-if="$odd" style="background-color:#f1f1f1">{{ x.Country }}</td>
    <td ng-if="$even">{{ x.Country }}</td>
  </tr>
</table>

Prueba personalmente