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

Posted by Kasani007 under AngularJS 1x on 4/1/2016 | Points: 10 | Views : 904 | Status : [Member] | Replies : 4

Write New Post |

Search Forums | Answered

Resolved Posts |

Un Answered Posts |

Forums Home

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

[Resolved]

Reply | Reply with Attachment

Alert Moderator

Responses

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

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

@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

0	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

0	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

0	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

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

Latest Posts