AngularJS Tables: Most of you are aware of how to work with tables in AngularJS. Consider the example given below which shows how a simple table can be displayed.
AngularJS Table Example
The below code can be used for displaying a simple table that contains list of country names.
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="myApplication" ng-controller="cusCtrl">
<table>
<tr ng-repeat="p in names">
<td>{{p.Name }}</td>
<td>{{p.Country }}</td>
</tr>
</table>
</div>
<script>
var application = angular.module('my Application', []);
application.controller('cusCtrl', function($scope,
$http) {
$http.get("subjects.php")
success(function (response)($scope.names =response.records;});
});
</script>
</body>
</html>
Table with CSS
AngularJS can also be combined with CSS so as to display a simple table. CSS is well known for styling a table. Consider the example given below, showing how this can be done:
Table with CSS Example
<!DOCTYPE html>
<html>
<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>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="myApplication" ng-controller="cusCtrl">
<table>
<tr ng-repeat="p in names">
<td>{{p.Name }}</td>
<td>{{p.Country}}</td>
</tr>
</table>
</div>
<script>
var application = angular.module('myApplication', []);
application.controller('cusCtrl', function($scope,$http) {
$http.get("countries.php")
.success(function (response) ($scope.names =response.records;});
});
</script>
</body>
</html>
Table with CSS Example Output
Styles will be applied to the above table due to the use of the CSS.
Table with “orderBy” Filter
This type of filter can be used for the purpose of displaying a table in AngularJS. Consider the example given below which shows how it can be done:
Table with “orderBy” Filter Example
<!DOCTYPE html>
<html>
<style>
table, th, td {
border: 2px solid grey;
border-collapse: collapse;
padding: 6px;
}
table tr : nth-child(odd)
background- color: #f2f2f2;
{
table tr:nth-child(even) {
background-color: #f2f2ff;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="myApplication" ng-controller="cusCtrl">
<table>
<tr ng-repeat="p in names | orderBy: 'Country'">
<td>{{p.Name}}</td>
<td>{{ p.Country}}</td>
</tr>
</table>
</div>
<script>
var application =module('myApplication', []);
application.controller('cusCtrl', function($scope,$http) {
$http.get("countries.php")
success(function (response) {$scope.names =response.records;});
});
</script>
</body>
</html>
Table with “orderBy” Filter Example Output
That is how the clause can be used for creating a table.
Table with uppercase Filter
The uppercase filter can be used for the purpose of displaying a particular table. This can be done as shown below:
Table with uppercase Filter Example
<!DOCTYPE html>
<html>
<style>
table, th, td {
border: 2px solid grey;
border-collapse: collapse;
padding: 6px;
}
table tr:nth-child(odd)
background-color: #f2f2f1;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app-"myApplication" ng-controller="cusCtrl">
<table>
<tr ng-repeat="p in names">
<td>{{ p.Name }}</td>
<td>{{p.Country | uppercase }}</td>
</tr>
< /table >
</div>
<script>
var application p = angular. module(myApplication',[]);
application.controller(cusCtrl', function($scope,$http) {
$http.get("subjects.php")
success(function (response) {$scope.names =response.records;});
});
</script>
</body>
</html>
Table with uppercase Filter Example Output
Try the above code to know how to add an uppercase filter. You can also add other filters also. Before that create a file as created in above program “countries.php” and add filters as you like. This is how to use the filter for displaying a table in AngularJS.
Table with index
To display a table in AngularJS by use of an index, follow the example given below:
Table with index Example
<!DOCTYPE html>
</html>
<style>
table, th, td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd)
background-color: #f2f1f1;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="myApplication" ng-controller="cusCtrl">
<table>
<tr:ng-repeat ="p in names">
<td>{{ $index + 1 }}</td>
<td>{{p.Name }}</td>
<td>{{p.Country }}</td>
</tr>
</table>
</div>
<script>
var application = angular.module('myApplication', []);
application.controller('cusCtrl', function($scope,$http) {
$http.get("contries.php")
success(function (response) ($scope.names =response.records;});
});
</script>
</body>
</html>
Table with index Example Output
The output provides where you have located the index has been used in the above code.
Even and Odd Table
This can be done as shown below.
Even and Odd Table Example
<!DOCTYPE html>
<html>
<style>
table, td {
border: 2px solid grey;
border-collapse: collapse;
padding: 6px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="myApplication" ng-controller="cusCtrl">
<table>
<tr ng-repeat="p in names">
<td ng-if="$odd" style="background-color:#f2f2f1">
{{p.Name }}</td>
<td ng-if="$even">
{{p.Name }}</td>
<td ng-if="$odd" style="background-color:#f1f1f1">
{{p.Country}}</td>
<td ng-if="$even">
{{p.Country }}</td>
</tr>
</table>
</div>
<script>
var application = angular.module('myApplication', []);
application.controller('cusCtrl', function($scope,$http) {
$http.get("subjects.php")
success(function (response) {$scope.names =response.records;});
});
</script>
</body>
</html>
That is how it can be done. The procedure is very simple.