I have a problem while printing angular js object data in table through ng-repeat.
I am not getting the output, Someone please help me.
/// <reference path="ControllersDemo.js" />
var Myapp = angular.module("Mymodule", []);
Myapp.controller("mycontrol", function ($scope) {
$scope.Students = [{
Name: "Ankit Kumar",
Course: "B.Tech",
City: "New Delhi",
Contact: "9718619932",
Photo:"/Images/Ankit Kumar.jpg"
},{
Name: "Amit Kumar Chaurasiya",
Course: "MCA",
City: "Allahabad",
Contact: "9818762920",
Photo: "/Images/Koala.jpg"
}, {
Name: "Swati",
Course: "PGDCA",
City: "Kanpur",
Contact: "7604183039",
Photo: "/Images/swati.jpg"
}
];
});
HTML Code is here:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/ControllersDemo.js"></script>
<script src="Scripts/jquery-1.9.1.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
</head>
<body ng-app="Mymodule">
<div ng-controller="mycontrol">
<table class="table table-bordered">
<thead>
<tr>
<th>Name</th>
<th>Course</th>
<th>City</th>
<th>Contact</th>
<th>Photo</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="student in Students">
<td>{{Student.Name}}</td>
<td>{{Student.Course}}</td>
<td>{{Student.City}}</td>
<td>{{Student.Contact}}</td>
<td>
<img src={{Student.Photo}} alt={{'Photo of '+Student.Name}} style="height:80px; width:80px;" />
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>