AngularJS tavolo
istruzioni ng-repeat può essere la forma perfetta visualizzazione.
Visualizzazione dei dati in una tabella
Visualizzazione tramite il modulo angolare è molto semplice:
AngularJS esempi
<Div ng-app = "myApp " ng-controllore = "customersCtrl">
<Table>
<Tr ng-repeat = "x nei nomi">
<Td> {{x.Name}} </ td>
<Td> {{x.Country}} </ td>
</ Tr>
</ Table>
</ Div>
<Script>
var app = angular.module ( 'myApp', []);
app.controller ( 'customersCtrl', function ($ portata, $ http) {
$ Http.get ( "http://www.w3big.com/try/angularjs/data/Customers_JSON.php")
.success (function (response) {$ scope.names = response.records;});
});
</ Script>
<Table>
<Tr ng-repeat = "x nei nomi">
<Td> {{x.Name}} </ td>
<Td> {{x.Country}} </ td>
</ Tr>
</ Table>
</ Div>
<Script>
var app = angular.module ( 'myApp', []);
app.controller ( 'customersCtrl', function ($ portata, $ http) {
$ Http.get ( "http://www.w3big.com/try/angularjs/data/Customers_JSON.php")
.success (function (response) {$ scope.names = response.records;});
});
</ Script>
Prova »
Utilizzare gli stili CSS
Al fine di rendere la pagina più attraente, possiamo utilizzare CSS nella pagina:
Stili CSS
<Style>
tavolo, th, td {
border: 1px grigio solido;
border-collapse: crollo;
padding: 5px;
}
tavolo tr: nth-child (dispari ) {
background-color: # f1f1f1;
}
tavolo tr: nth-child (anche ) {
background-color: #FFFFFF;
}
</ Style>
tavolo, th, td {
border: 1px grigio solido;
border-collapse: crollo;
padding: 5px;
}
tavolo tr: nth-child (dispari ) {
background-color: # f1f1f1;
}
tavolo tr: nth-child (anche ) {
background-color: #FFFFFF;
}
</ Style>
Prova »
Utilizzare filtri orderBy
Display Sort, è possibile utilizzare i filtri orderBy:
AngularJS esempi
<Table>
<Tr ng-repeat = "x nei nomi | orderBy: 'Paese'">
<Td> {{x.Name}} </ td>
<Td> {{x.Country}} </ td>
</ Tr>
</ Table>
<Tr ng-repeat = "x nei nomi | orderBy: 'Paese'">
<Td> {{x.Name}} </ td>
<Td> {{x.Country}} </ td>
</ Tr>
</ Table>
Prova »
Utilizzare filtri maiuscolo
Utilizzare il filtro maiuscolo in maiuscolo:
AngularJS esempi
<Table>
<Tr ng-repeat = "x nei nomi">
<Td> {{x.Name}} </ td>
<Td> {{x.Country | maiuscolo }} </ td>
</ Tr>
</ Table>
<Tr ng-repeat = "x nei nomi">
<Td> {{x.Name}} </ td>
<Td> {{x.Country | maiuscolo }} </ td>
</ Tr>
</ Table>
Prova »
numero del display ($ indice)
La tabella mostra il numero di serie può essere aggiunto in indice $ <td> in:
AngularJS esempi
<Table>
<Tr ng-repeat = "x nei nomi">
<Td> {{$ index + 1}} </ td>
<Td> {{x.Name}} </ td>
<Td> {{x.Country}} </ td>
</ Tr>
</ Table>
<Tr ng-repeat = "x nei nomi">
<Td> {{$ index + 1}} </ td>
<Td> {{x.Name}} </ td>
<Td> {{x.Country}} </ td>
</ Tr>
</ Table>
Prova »
Utilizzare $ pari e dispari $
AngularJS esempi
<Table>
<Tr ng-repeat = "x nei nomi">
<Td ng-if = "$ strano" style = "background-color: # f1f1f1"> {{x.Name}} </ td>
<Td ng-if = "$ persino"> {{x.Name}} </ td>
<Td ng-if = "$ strano" style = "background-color: # f1f1f1"> {{x.Country}} </ td>
<Td ng-if = "$ persino"> {{x.Country}} </ td>
</ Tr>
</ Table>
<Tr ng-repeat = "x nei nomi">
<Td ng-if = "$ strano" style = "background-color: # f1f1f1"> {{x.Name}} </ td>
<Td ng-if = "$ persino"> {{x.Name}} </ td>
<Td ng-if = "$ strano" style = "background-color: # f1f1f1"> {{x.Country}} </ td>
<Td ng-if = "$ persino"> {{x.Country}} </ td>
</ Tr>
</ Table>
Prova »