Tableaux AngularJS

L'instruction ng-repeat est très adaptée pour afficher des tableaux.

Afficher des données dans un tableau

Afficher un tableau avec AngularJS est très simple :

Exemples AngularJS

<div ng-app="monApp" ng-controller="customersCtrl">
<table>
  <tr ng-repeat="x in names">
    <td>{{ x.Nom }}</td>
    <td>{{ x.Country }}</td>
  </tr>
</table>
</div>
<script>
var app = angular.module('monApp', []);
app.controller('customersCtrl', function($scope, $http) {
  $http.get("customers.php")
  .then(function (response) {$scope.noms = response.data.records;});
);
</script>

Essayer vous-même

Afficher en utilisant les styles CSS

Pour le rendre plus joli, vous pouvez ajouter quelques styles CSS à la page :

Styles CSS

<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>

Essayer vous-même

Afficher en utilisant le filtre trierPar

Pour trier le tableau, ajoutez trierPar Filtre :

Exemple AngularJS

<table>
  <tr ng-repeat="x in noms | trierPar : 'Pays'">
    <td>{{ x.Nom }}</td>
    <td>{{ x.Country }}</td>
  </tr>
</table>

Essayer vous-même

Afficher en utilisant le filtre majuscules

Pour afficher en majuscules, ajoutez majuscules Filtre :

Exemple AngularJS

<table>
  <tr ng-repeat="x in names">
    <td>{{ x.Nom }}</td>
    <td>{{ x.Pays | majuscules }}</td>
  </tr>
</table>

Essayer vous-même

Afficher l'index du tableau ($index)

Pour afficher l'index du tableau, ajoutez une balise avec $index de <td> :

Exemple AngularJS

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

Essayer vous-même

Utilisation de $even et $odd

Exemple 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>

Essayer vous-même