SYBBA(CA)
Angular Js Practical Slips
Slip no 3 Using AngularJS display the 10 student details in Table format
(using ng-repeat directive use Array to store data)
<!DOCTYPE html>
<html>
<script src= "C:\angular-1.8.0\angular-1.8.0\angular.js">
</script>
<style>
body {
margin: 2%;
font-size: 120%;
}
th,
td {
padding: 20px;
}
</style>
<body ng-app="myApp" ng-controller="ListController">
<h1>Student Details</h1>
<table border=1>
<thead>
<tr>
<th>S.No</th>
<th>Name</th>
<th>class</th>
<th>phone no </th>
<th>address</th>
</tr>
</thead>
<tr ng-repeat="i in student">
<td> {{i.sno}} </td>
<td> {{i.name}} </td>
<td> {{i.class}} </td>
<td> {{i.phno}} </td>
<td> {{i.address}} </td>
</tr>
</table>
</body>
<script>
var app = angular.module('myApp', []);
app.controller(
'ListController', function($scope) {
$scope.student = [{
sno: 1,
name: 'Roger Federer',
class: 'FY',
phno: 9876563454,
address: "satara",
}, {
sno: 2,
name: 'Rafael Nadal',
class: 'SY',
phno: 7865452396,
address: "Pune",
}, {
sno: 3,
name: 'Novak Djokovic',
class: 'SY',
phno: 7865452316,
address: "kolhapur",
}, {
sno: 4,
name: 'Pete Samprass',
class: 'FY',
phno: 7765458921,
address: "goa",
}, {
sno: 5,
name: 'Roy Emerson',
class: 'FY',
phno: 7765458921,
address: "satara",
}
];
});
</script>
</html>
No comments:
Post a Comment