AngularJS tableau
instruction ng-repeat peut être la forme d'affichage parfait.
Affichage des données dans une table
Affichage à l'aide sous forme angulaire est très simple:
AngularJS exemples
<Div ng-app = "myApp ng-contrôleur" = "customersCtrl">
<Table>
<Tr ng-repeat = "x dans les noms">
<Td> {{x.Name}} </ td>
<Td> {{x.Country}} </ td>
</ Tr>
</ Table>
</ Div>
<Script>
var app = angular.module ( 'myApp', []);
app.controller ( 'customersCtrl', function ($ portée, $ http) {
$ Http.get ( «http://www.w3big.com/try/angularjs/data/Customers_JSON.php»)
.success (function (réponse) {$ scope.names = response.records;});
});
</ Script>
<Table>
<Tr ng-repeat = "x dans les noms">
<Td> {{x.Name}} </ td>
<Td> {{x.Country}} </ td>
</ Tr>
</ Table>
</ Div>
<Script>
var app = angular.module ( 'myApp', []);
app.controller ( 'customersCtrl', function ($ portée, $ http) {
$ Http.get ( «http://www.w3big.com/try/angularjs/data/Customers_JSON.php»)
.success (function (réponse) {$ scope.names = response.records;});
});
</ Script>
Essayez »
Utilisez les styles CSS
Afin de rendre la page plus attrayante, nous pouvons utiliser les CSS dans la page:
Styles CSS
<Style>
table, th, td {
border: 1px solide gris;
border-collapse: collapse;
padding: 5px;
}
Table tr: nth-child (impair ) {
background-color: # f1f1f1;
}
Table tr: nth-child (même ) {
background-color: #ffffff;
}
</ Style>
table, th, td {
border: 1px solide gris;
border-collapse: collapse;
padding: 5px;
}
Table tr: nth-child (impair ) {
background-color: # f1f1f1;
}
Table tr: nth-child (même ) {
background-color: #ffffff;
}
</ Style>
Essayez »
Utiliser un filtre orderBy
Trier affichage, vous pouvez utiliser des filtres orderBy:
AngularJS exemples
<Table>
<Tr ng-repeat = "x dans les noms | orderBy: 'Country'">
<Td> {{x.Name}} </ td>
<Td> {{x.Country}} </ td>
</ Tr>
</ Table>
<Tr ng-repeat = "x dans les noms | orderBy: 'Country'">
<Td> {{x.Name}} </ td>
<Td> {{x.Country}} </ td>
</ Tr>
</ Table>
Essayez »
Utiliser un filtre majuscule
Utiliser un filtre majuscule en majuscules:
AngularJS exemples
<Table>
<Tr ng-repeat = "x dans les noms">
<Td> {{x.Name}} </ td>
<Td> {{x.Country | majuscules }} </ td>
</ Tr>
</ Table>
<Tr ng-repeat = "x dans les noms">
<Td> {{x.Name}} </ td>
<Td> {{x.Country | majuscules }} </ td>
</ Tr>
</ Table>
Essayez »
Numéro d'affichage ($ index)
Le tableau montre le numéro de série peut être ajouté à l' index $ <td> dans:
AngularJS exemples
<Table>
<Tr ng-repeat = "x dans les noms">
<Td> {{$ index + 1}} </ td>
<Td> {{x.Name}} </ td>
<Td> {{x.Country}} </ td>
</ Tr>
</ Table>
<Tr ng-repeat = "x dans les noms">
<Td> {{$ index + 1}} </ td>
<Td> {{x.Name}} </ td>
<Td> {{x.Country}} </ td>
</ Tr>
</ Table>
Essayez »
Utilisez $ même et $ impaire
AngularJS exemples
<Table>
<Tr ng-repeat = "x dans les noms">
<Td ng-if = "$ impair" style = "background-color: # f1f1f1"> {{x.Name}} </ td>
<Td ng-if = "$ même"> {{x.Name}} </ td>
<Td ng-if = "$ impair" style = "background-color: # f1f1f1"> {{x.Country}} </ td>
<Td ng-if = "$ même"> {{x.Country}} </ td>
</ Tr>
</ Table>
<Tr ng-repeat = "x dans les noms">
<Td ng-if = "$ impair" style = "background-color: # f1f1f1"> {{x.Name}} </ td>
<Td ng-if = "$ même"> {{x.Name}} </ td>
<Td ng-if = "$ impair" style = "background-color: # f1f1f1"> {{x.Country}} </ td>
<Td ng-if = "$ même"> {{x.Country}} </ td>
</ Tr>
</ Table>
Essayez »