Tuesday , February 28 2017
Home / angularjs / Array of objects in AngularJs Example

Array of objects in AngularJs Example

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.


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

On the above ng-controller is the AngularJs directive. It attaches a AngularJS controller to the view.

Complete Example :


<!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>

Output :

array of objects in AngularJsAbove 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 :


<!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>

Output :

Example for Array of Objects in AngularJsThat’s it, Happy Learning 🙂

About chandrashekhar

Hi Folks, you have reach this so far, that shows you like what you are learning. Then why don't you support us to improve for bettor tutorials by leaving your valuable comments and why not you keep in touch with us for latest updates on your favorite blog @ facebook , twitter , Or Google+ ,

Check Also

AngularJs Data Binding Example

One of the important feature of AngularJs is Data Binding. Data binding makes the AngularJs …

Leave a Reply

Your email address will not be published. Required fields are marked *