
@Tsurendra690-29180 Sir, your answer is partially right. The main stuff that he is looking for is looping which can be done using
ng-repeat. @Kasani007 Sir, I am providing the example in the below step by step. Please let me know in case you face any problem
The Class(s) will be as under public class Person
{
public int PersonID { get; set; }
public string PersonName { get; set; }
public int PersonAge { get; set; }
public List<Address> Residences { get; set; }
}
public class Address
{
public string Address { get; set; }
}
The personController.js as under //creating an application module
var personAppModule = angular.module("personApp", []);
//The below code will read the data from student.json file and will pass to the $scope variable
personAppModule.controller("PersonCtrl", function($scope, $http){
//invoke the service
$http.get("http://localhost:60422/PersonData") //reading the data from Web API
.success (function(data){
console.log(data);
$scope.persons = data; // binding the data to the $scope variable
})
.error(function(data, status) {
console.error('failure loading the person record', status, data);
$scope.persons = { }; //return blank record if something goes wrong
});
});//end controller
and the view(index.html) as follows <!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@1.4.0-beta.6" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0-beta.6/angular.js">
</script>
<script src="personController.js"></script>
</head>
<body ng-app="personApp">
<div align="center"><b><u><font size="8px">Employee Details</font></u></b></div>
<div ng-controller="PersonCtrl" align="center">
<table>
<tr>
<td>PersonID</td>
<td>PersonName</td>
<td>PersonAge</td>
<td colspan="2">Residential Address</td>
</tr>
<tr ng-repeat="p in persons">
<td><span>{{p.personID}}</span></td>
<td><span>{{p.personName}}</span></td>
<td><span>{{p.personAge}}</span></td>
<td ng-repeat="a in p.Residences">
<table border="1">
<tr bgcolor="pink">
<td>Address</td>
</tr>
<tr>
<td><span>{{a.address}}</span></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>
Kindly notice the way ng-repeat has put into action.
Thanks
--
Thanks & Regards,
RNA Team
Kasani007, if this helps please login to Mark As Answer. | Alert Moderator