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 :
Happy Learning 🙂
