Saturday , August 19 2017
Home / angularjs / Using Array in AngularJs Example

Using Array in AngularJs Example

In this tutorial, we are going to discuss how to use a simple Array in AngularJs application. Here we are going to create a simple array in AngularJs controller and print the array elements in view.

Array in AngularJs Example :

Creating AngularJs controller with array of elements :

<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.marks = [95,52,65,98,55,35];
    })
</script>

Above is the code for AngularJs controller.

$scope.marks = [95,52,65,98,55,35];

Created marks array in AngularJs.

Creating HTML Page :


<html>
<head>
<meta charset="UTF-8">
<title>AngularJs Controller with Array Example</title>
</head>
<body ng-app="myApp">
    <h1>Student Marks List</h1>
    <div ng-controller="studentCotroller">
        <ul>
        <li ng-repeat="item in marks">
            Subject {{$index+1}} : {{item}}
        </li>
        </ul>
    </div>
</body>
</html>

Above is the code, in which we are trying to access the marks array from AngularJs controller.

ng-repeat is an AngularJs directive, used to iterate over the array. You can imagine ng-repeat directive like foreach in java.

Complete Code Array in AngularJs Example :


<html>
<head>
<meta charset="UTF-8">
<title>AngularJs Controller with Array 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.marks = [95,52,65,98,55,35];
    })
</script>
</head>
<body ng-app="myApp">
    <h1>Student Marks List</h1>
    <div ng-controller="studentCotroller">
        <ul>
        <li ng-repeat="item in marks">
            Subject {{$index+1}} : {{item}}
        </li>
        </ul>
    </div>
</body>
</html>

Output :

Using Array in AngularJs ExampleHappy 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+ ,

Recommended

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 *