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="https://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="https://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 🙂