Angularjs Table


Prev Tutorial Next Tutorial

Angularjs Table

The ng-repeat directive is use for draw tables easily. Table data are generally repeatable. Following code is design a table using ng-repeat directive;

Example

<table>
 <tr ng-repeat="x in names">
  <td>{{ x.Student}}</td>
  <td>{{ x.Marks}}</td>
 </tr>
</table>

Style table Using CSS

You can also style your table using CSS same like below.

Example

<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>

Example of AngularJS using Table

Example

<html>
<head>
<title>AngularJS Table</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<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>
</head>
<body>
<h2>AngularJS Application Using Table</h2>
<div ng-app="" ng-controller="studentController">

<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>
</div>
<script>
function studentController($scope) {
   $scope.student = {
      subjects:[
         {name:'Physics',marks:60},
         {name:'Chemistry',marks:70},
         {name:'Math',marks:65},
		 {name:'English',marks:62},
		 {name:'Hindi',marks:67}
      ],
      
   };
}
</script>
</body>
</html>

Result

AngularJS Table

AngularJS Application Using Table

Name Marks
{{ subject.name }} {{ subject.marks }}

Prev Tutorial Next Tutorial

Google Advertisements
Download Projects

Google Adsense Advertisements

Buy 3 Year Old Domain, Tutorialday.com, SeosmoTools.com @$200

Buy This Ad Space @$50 per Month, Ad Size 300X250 Contact on: hitesh.xc@gmail.com WhatsApp no. 8882538826

Yahoo Advertisements