How to bind single data and list of data in angularjs [Resolved]

Posted by Kasani007 under AngularJS on 4/1/2016 | Points: 10 | Views : 501 | Status : [Member] | Replies : 4
I have a person object which is having List Of Addresses. i.e., Person

class Person
{
int personId,
string personName,
int personAge,
List<Addresses>
}


like this in angularjs




Responses

Posted by: Rajnilari2015 on: 4/4/2016 [Member] [Microsoft_MVP] [MVP] Platinum | Points: 50

Up
0
Down

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

Posted by: Tsurendra690-29180 on: 4/2/2016 [Member] Starter | Points: 25

Up
0
Down
Please go through with this link.

http://techfunda.com/howto/462/one-way-data-binding

Hope it will help you

Kasani007, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Vijaysaklani on: 8/12/2016 [Member] Starter | Points: 25

Up
0
Down
Hi,

Check below given link. It help u to show display data in Grid format.

http://www.articlemirror.in/2016/07/angularjs-display-data-in-tabular-format-asp.net-mvc.html

Kasani007, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Bhuvanesh6 on: 8/18/2016 [Member] Starter | Points: 25

Up
0
Down
scope.Person is an array so you have to use ng-repeat.
if your data is an object, you don't need to use ng-repeat. ex: personController

.controller('personController', ['$scope', function(scope){
scope.Person ={
FirstName:"Bhuvan",
LastName:"Mohan"
}
}])


Html:

<div ng-controller="personController">
<div>
<span class="FirstName">{{person.FirstName}}</span>
<span class="LastName">{{person.LastName}}</span>
</div>


Bhuvan

Kasani007, if this helps please login to Mark As Answer. | Alert Moderator

Login to post response