Table data is normally repeatable by nature. ng-repeat directive can be used to draw table easily. Following example states the use of ng-repeat directive to draw a table. <table> <tr> <th> Name </th> <th> Marks </th> </tr> <tr ng-repeat = "subject in student.subjects" > <td> {{ subject.name }} </td> <td> {{ subject.marks }} </td> </tr> </table> Table can be styled using CSS Styling. <style> table , th , td { border : 1px solid grey ; border - collapse : collapse ; padding : 5px ; } table tr : nth - child ( odd ) { background - color : #f2f2f2; } table tr : nth - child ( even ) { background - color : #ffffff; } </style> Example Following example will showcase all the above mentioned directive. <html> <head> <...
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
</head>
<body style="font:15px Verdana;">
<div ng-app="myApp" ng-controller="myController">
<!-- FOR '-joinDate' THE PREDICATE IS SET USING '-' (HYPHEN) KEY FOR DESCENDING ORDER. -->
<div ng-repeat="emps in empArray | orderBy : '-joinDate'">
<div> {{ emps.joinDate | date : 'dd/MM/yyyy' }} : {{ emps.values.name }} </div>
</div>
</div>
</body>
<script>
angular.module("myApp", [])
.controller('myController', ['$scope', function ($scope) {
// CREATE AN 'employees' OBJECT, WITH AN ARRAY OF DATA.
$scope.employees = {
"05/17/2015": { 'name': 'Alpha', 'age': 37 },
"03/25/2016": { 'name': 'Bravo', 'age': 27 },
"09/11/2015": { 'name': 'Charlie', 'age': 29 },
"01/07/2016": { 'name': 'Delta', 'age': 19 },
"03/09/2014": { 'name': 'Echo', 'age': 32 }
}
$scope.empArray = Object.keys($scope.employees)
.map(function (value, index) {
return { joinDate: new Date(value), values: $scope.employees[value] }
}
);
} ]);
</script>
</html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
</head>
<body style="font:15px Verdana;">
<div ng-app="myApp" ng-controller="myController">
<!-- FOR '-joinDate' THE PREDICATE IS SET USING '-' (HYPHEN) KEY FOR DESCENDING ORDER. -->
<div ng-repeat="emps in empArray | orderBy : '-joinDate'">
<div> {{ emps.joinDate | date : 'dd/MM/yyyy' }} : {{ emps.values.name }} </div>
</div>
</div>
</body>
<script>
angular.module("myApp", [])
.controller('myController', ['$scope', function ($scope) {
// CREATE AN 'employees' OBJECT, WITH AN ARRAY OF DATA.
$scope.employees = {
"05/17/2015": { 'name': 'Alpha', 'age': 37 },
"03/25/2016": { 'name': 'Bravo', 'age': 27 },
"09/11/2015": { 'name': 'Charlie', 'age': 29 },
"01/07/2016": { 'name': 'Delta', 'age': 19 },
"03/09/2014": { 'name': 'Echo', 'age': 32 }
}
$scope.empArray = Object.keys($scope.employees)
.map(function (value, index) {
return { joinDate: new Date(value), values: $scope.employees[value] }
}
);
} ]);
</script>
</html>
Comments
Post a Comment
Comment