In the previous example, we saw how to access an simple Array in AngularJs. In this tutorial we are going to understand how to handle array of objects in AngularJs. Here is the example to create an object in AngularJS.
Creating Object in AngularJs :
$scope.student= {
sId: 1001, sName: "chandra shekhar", sAddress: "Hyderabad", marks: [65, 85, 68, 75, 72, 97]
}
Above is the example snippet to represent an object in AngularJs. Here Student is an object and sId, sName, sAddress and marks are the properties of student object.
$scope is an object of AngularJs, which refers to the application’s model.
Bind the student details with view. ng-controller directive is used to bind the view with Angular controller.
[html]
<table ng-controller="studentCotroller">
<tr>
<td>StudentId</td>
<td>StudentName</td>
<td>StudentAddress</td>
<td>StudentMarks</td>
</tr>
<tr>
<td>{{student.sId}}</td>
<td>{{student.sName}}</td>
<td>{{student.sAddress}}</td>
<td><ul></ul><li ng-repeat="mark in student.marks">{{mark}}</li></ul></td>
</tr>
</table>
[/html]
On the above ng-controller is the AngularJs directive. It attaches a AngularJS controller to the view.
Complete Example :
[html]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Creating Object in AngularJs Example</title>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("studentCotroller", function($scope) {
$scope.student = {
sId:1001,
sName:"chandra shekhar",
sAddress:"Hyderabad",
marks:[65,85,68,75,72,97]
}
})
</script>
</head>
<body ng-app="myApp">
<h1>Student Marks List</h1>
<table ng-controller="studentCotroller">
<tr>
<td>StudentId</td>
<td>StudentName</td>
<td>StudentAddress</td>
<td>StudentMarks</td>
</tr>
<tr>
<td>{{student.sId}}</td>
<td>{{student.sName}}</td>
<td>{{student.sAddress}}</td>
<td><ul></ul><li ng-repeat="mark in student.marks">{{mark}}</li></ul></td>
</tr>
</table>
</body>
</html>
[/html]
Output :
Above is the example to create an single object and accessing the object in AngularJs.
Array of Objects in AngularJs :
Creating array of Objects :
$scope.products=[ {
prodId: 1001, prodName: "iPhoe6", prodPrice: "65,000 INR",
}
,
{
prodId: 1002, prodName: "iPhone5", prodPrice: "50,000 INR",
}
,
{
prodId: 1003, prodName: "iPhone6s", prodPrice: "1,20,000 INR",
}
]
On the above, we created products object, which consists of multiple products information.
Example for Array of Objects in AngularJs :
[html]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Example for Array of Objects in AngularJs </title>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("productCotroller", function($scope) {
$scope.products = [ {
prodId : 1001,
prodName : "iPhoe6",
prodPrice : "65,000 INR",
}, {
prodId : 1002,
prodName : "iPhone5",
prodPrice : "50,000 INR",
}, {
prodId : 1003,
prodName : "iPhone6s",
prodPrice : "1,20,000 INR",
} ]
})
</script>
</head>
<body ng-app="myApp">
<h1>Products Information</h1>
<table ng-controller="productCotroller" border="2">
<tr style="background-color:green">
<td>Product Id</td>
<td>Product Name</td>
<td>Product Price</td>
</tr>
<tr ng-repeat="product in products">
<td>{{product.prodId}}</td>
<td>{{product.prodName}}</td>
<td>{{product.prodPrice}}</td>
</tr>
</table>
</body>
</html>
[/html]
Output :
That’s it, Happy Learning 🙂
