AngularJS Tisch
ng-Repeat-Anweisung kann die perfekte Darstellungsform sein.
Anzeigen von Daten in einer Tabelle
Display-eckige Form ist sehr einfach:
AngularJS Beispiele
<Div ng-app = "myApp " ng-Controller = "customersCtrl">
<Table>
<Tr ng-repeat = "x in Namen">
<Td> {{x.Name}} </ td>
<Td> {{x.Country}} </ td>
</ Tr>
</ Table>
</ Div>
<Script>
var app = angular.module ( 'myApp', []);
app.controller ( 'customersCtrl', function ($ scope, $ http) {
$ Http.get ( "http://www.w3big.com/try/angularjs/data/Customers_JSON.php")
.success (function (Antwort) {$ scope.names = response.records;});
});
</ Script>
<Table>
<Tr ng-repeat = "x in Namen">
<Td> {{x.Name}} </ td>
<Td> {{x.Country}} </ td>
</ Tr>
</ Table>
</ Div>
<Script>
var app = angular.module ( 'myApp', []);
app.controller ( 'customersCtrl', function ($ scope, $ http) {
$ Http.get ( "http://www.w3big.com/try/angularjs/data/Customers_JSON.php")
.success (function (Antwort) {$ scope.names = response.records;});
});
</ Script>
Versuchen »
Verwenden Sie CSS-Stile
Um die Seite attraktiver zu machen, können wir CSS auf der Seite verwenden:
CSS-Stile
<Style>
Tabelle, th, td {
border: 1px solid gray;
border-collapse: collapse;
padding: 5px;
}
Tabelle tr: nth-child (ungerade ) {
background-color: # f1f1f1;
}
Tabelle tr: nth-child (auch ) {
background-color: #ffffff;
}
</ Style>
Tabelle, th, td {
border: 1px solid gray;
border-collapse: collapse;
padding: 5px;
}
Tabelle tr: nth-child (ungerade ) {
background-color: # f1f1f1;
}
Tabelle tr: nth-child (auch ) {
background-color: #ffffff;
}
</ Style>
Versuchen »
Verwenden Sie orderBy Filter
Sort - Display können Sie orderBy Filter verwenden:
AngularJS Beispiele
<Table>
<Tr ng-repeat = "x in Namen | orderBy: 'Land'">
<Td> {{x.Name}} </ td>
<Td> {{x.Country}} </ td>
</ Tr>
</ Table>
<Tr ng-repeat = "x in Namen | orderBy: 'Land'">
<Td> {{x.Name}} </ td>
<Td> {{x.Country}} </ td>
</ Tr>
</ Table>
Versuchen »
Verwenden Sie Großfilter
Verwenden Sie Groß Filter in Großbuchstaben:
AngularJS Beispiele
<Table>
<Tr ng-repeat = "x in Namen">
<Td> {{x.Name}} </ td>
<Td> {{x.Country | Groß }} </ td>
</ Tr>
</ Table>
<Tr ng-repeat = "x in Namen">
<Td> {{x.Name}} </ td>
<Td> {{x.Country | Groß }} </ td>
</ Tr>
</ Table>
Versuchen »
Anzeigenummer ($ index)
Tabelle zeigt die Seriennummer kann bei $ Index hinzugefügt werden <td> in:
AngularJS Beispiele
<Table>
<Tr ng-repeat = "x in Namen">
<Td> {{$ index + 1}} </ td>
<Td> {{x.Name}} </ td>
<Td> {{x.Country}} </ td>
</ Tr>
</ Table>
<Tr ng-repeat = "x in Namen">
<Td> {{$ index + 1}} </ td>
<Td> {{x.Name}} </ td>
<Td> {{x.Country}} </ td>
</ Tr>
</ Table>
Versuchen »
Verwenden Sie $ selbst und $ ungerade
AngularJS Beispiele
<Table>
<Tr ng-repeat = "x in Namen">
<Td ng-if = "$ ungerade" style = "background-color: # f1f1f1"> {{x.Name}} </ td>
<Td ng-if = "$ sogar"> {{x.Name}} </ td>
<Td ng-if = "$ ungerade" style = "background-color: # f1f1f1"> {{x.Country}} </ td>
<Td ng-if = "$ sogar"> {{x.Country}} </ td>
</ Tr>
</ Table>
<Tr ng-repeat = "x in Namen">
<Td ng-if = "$ ungerade" style = "background-color: # f1f1f1"> {{x.Name}} </ td>
<Td ng-if = "$ sogar"> {{x.Name}} </ td>
<Td ng-if = "$ ungerade" style = "background-color: # f1f1f1"> {{x.Country}} </ td>
<Td ng-if = "$ sogar"> {{x.Country}} </ td>
</ Tr>
</ Table>
Versuchen »