bing
Flat 10% & upto 50% off + Free additional Courses. Hurry up!

AngularJS Tables

 

Directive ng-repeat is used to draw table easily.

e.g.

<html>

<head>

<title>Angular JS Table</title>

<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

<style>

table, th , td {

border: 1px solid black;

padding: 4px;

}

</style>

</head>

<body>

<h2>AngularJS Tables</h2>

<div ng-app = "details" ng-controller = "studentController">

<table>

<tr>

<th>Subject Name</th>

<th>Marks</th>

</tr>

<tr ng-repeat = "subject in student.subjects">

<td ng-if="$odd" style="background-color:#ff6600">{{ subject.name }}</td>

<td ng-if="$even">{{ subject.name }}</td>

<td ng-if="$odd" style="background-color:#ff6600">{{ subject.marks }}</td>

<td ng-if="$even">{{ subject.marks }}</td>

</tr>

</table>

</td>

</div>

<script>

var details= angular.module("details", []);

details.controller('studentController', function($scope) {

$scope.student = {

subjects:[

{name:'English',marks:85},

{name:'Math',marks:90},

{name:'Physics',marks:80},

{name:'Chemistry',marks:75}

]

};

});

</script>

</body>

</html>

Output

AngularJS Tables

output7

"0 Responses on AngularJS Tables"

Training in Cities

Bangalore, Hyderabad, Chennai, Delhi, Kolkata, UK, London, Chicago, San Francisco, Dallas, Washington, New York, Orlando, Boston

100% Secure Payments. All major credit & debit cards accepted Or Pay by Paypal.

top

Sales Offer

  • To avail this offer, enroll before 06th December 2016.
  • This offer cannot be combined with any other offer.
  • This offer is valid on selected courses only.
  • Please use coupon codes mentioned below to avail the offer
offer-june

Sign Up or Login to view the Free AngularJS Tables.