1. Home
  2. AngularJS table

The best AngularJS table Tutorial In 2024, In this tutorial you can learn Display data in a table,AngularJS examples,Use CSS styles,CSS Styles,Use orderBy filter,AngularJS examples,Use uppercase filter,AngularJS examples,Display number ($ index),AngularJS examples,Use $ even and $ odd,AngularJS examples,

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.w3write.com/try/angularjs/data/Customers_JSON.php")
.success (function (response) {$ scope.names = response.records;});
});
</ Script>

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>

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>

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>

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>

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>

Hot Tools

Other Tools

Online Tutorial

Website Navigation

AngularJS table
10/30