Latest web development tutorials

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 ( "http://www.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>

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>

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>

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>

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>

try it"