AngularJS table
ng-repeat instruction can be the perfect display form.
Display data in a table
Display using angular form is very simple:
AngularJS examples
<Div ng-app = "myApp " ng-controller = "customersCtrl">
<Table>
<Tr ng-repeat = "x in names">
<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 ( "https://w3big.com/try/angularjs/data/Customers_JSON.php")
.success (function (response) {$ scope.names = response.records;});
});
</ Script>
<Table>
<Tr ng-repeat = "x in names">
<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 ( "https://w3big.com/try/angularjs/data/Customers_JSON.php")
.success (function (response) {$ scope.names = response.records;});
});
</ Script>
try it"
Use CSS styles
In order to make the page more attractive, we can use CSS in the page:
CSS Styles
<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>
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>
try it"
Use orderBy filter
Sort display, you can use orderBy filters:
AngularJS examples
<Table>
<Tr ng-repeat = "x in names | orderBy: 'Country'">
<Td> {{x.Name}} </ td>
<Td> {{x.Country}} </ td>
</ Tr>
</ Table>
<Tr ng-repeat = "x in names | orderBy: 'Country'">
<Td> {{x.Name}} </ td>
<Td> {{x.Country}} </ td>
</ Tr>
</ Table>
try it"
Use uppercase filter
Use uppercase filter to uppercase:
AngularJS examples
<Table>
<Tr ng-repeat = "x in names">
<Td> {{x.Name}} </ td>
<Td> {{x.Country | uppercase }} </ td>
</ Tr>
</ Table>
<Tr ng-repeat = "x in names">
<Td> {{x.Name}} </ td>
<Td> {{x.Country | uppercase }} </ td>
</ Tr>
</ Table>
try it"
Display number ($ index)
Table shows the serial number can be added at $ index <td> in:
AngularJS examples
<Table>
<Tr ng-repeat = "x in names">
<Td> {{$ index + 1}} </ td>
<Td> {{x.Name}} </ td>
<Td> {{x.Country}} </ td>
</ Tr>
</ Table>
<Tr ng-repeat = "x in names">
<Td> {{$ index + 1}} </ td>
<Td> {{x.Name}} </ td>
<Td> {{x.Country}} </ td>
</ Tr>
</ Table>
try it"
Use $ even and $ odd
AngularJS examples
<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>
<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>
try it"