Using Array in AngularJs Example

By | 2018-04-01T15:32:41+00:00 March 12th, 2016|angularjs|0 Comments

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 the Author:

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

Leave A Comment