AngularJs Tables
AngularJs Tables : Tables in AgularJs are created using the ng-repeat directives. You can create tables and add
css styles to them.
AngularJs Tables : Syntax
Example
<table>
<tr ng-repeat="data in usersData">
<td>{{data.fieldName1}}</td>
<td>{{data.fieldName2}}</td>
<td>{{data.fieldName3}}</td>
......
</tr>
</table>
|
Example
<!DOCTYPE html>
<html lang="en">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
</head>
<body>
<div ng-app="userApp" ng-controller ="userController">
<table>
<tr><th>Id</th><th>Name</th></tr>
<tr ng-repeat="data in usersData">
<td>{{data.id}}</td>
<td>{{data.name}}</td>
</tr>
</table>
</div>
<script>
var app = angular.module('userApp', []);
app.controller('userController', function($scope, $http) {
$http.get("http://runtest.tutorialsplane.com/json/getUsers.php")
.success(function(response) {$scope.usersData = response.users;});
});
</script>
</body>
</html>
|
Add Css In Table
You can add css directly in table tr and td tags or you can add it by adding custom classes.
Add Css In Table Example
<style>
table, tr, td{
border:1px solid #333;
padding:4px;
}
</style>
|
AngularJs $even and $odd Example
Add Css In Table Example
<table>
<tr><th>Id</th><th>Name</th></tr>
<tr ng-repeat="data in usersData">
<td ng-if="$even" style="background:yellow;">{{data.id}}</td>
<td ng-if="$odd" style="background:white;">{{data.id}}</td>
<td ng-if="$even" style="background:yellow;">{{data.name}}</td>
<td ng-if="$odd" style="background:white;">{{data.name}}</td>
</tr>
</table>
|
AngularJs Tables
Advertisements
