Array Expressions in AngularJS with Example

Here we will learn what are the array expressions in angularjs and how to use array expressions in angularjs with example.

AngularJS Array Expressions

Array expressions in angularjs are the expression that hold an array and use those array objects while evaluating array expressions in angularjs.

Example of Array Expressions in AngularJS

Create or add an HTML page (say index.html) in your application. After adding index.html page add following sample code of angularjs array expressions in header section of your page. 

 

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<script type="text/javascript">

var app = angular.module('expressionApp', [])

app.controller("expressionController", function ($scope) {

$scope.name = " Tutlane Student";

$scope.marks = [70, 75, 80, 95];

});

</script>

Write the following code under starting of body tag <body> for array expressions in angularjs like as shown below

 

<body ng-app="expressionApp">

<form id="form1">

<div ng-controller="expressionController">

<div>Array Expression</div>

Below is Marks obtained by <b>{{name}}</b> in different subjects are</br>

<p>In Hindi he obtained <b>{{marks[0]}}</b> marks</p>

<p>In English he obtained <b>{{marks[1]}}</b> marks</p>

<p>In Physics he obtained <b>{{marks[2]}}</b> marks</p>

<p>In Math he obtained <b>{{marks[3]}}</b> marks</p>

</div>

</form>

</body>

Following is the full example code for array expressions in angularjs with live demo as show below

 

Live Preview

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>

Array Expressions of 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('expressionApp', [])

app.controller("expressionController"function ($scope) {

$scope.name = "Tutlane Student";

$scope.marks = [70, 75, 80, 95];

});

</script>

</head>

<body ng-app="expressionApp">

<form id="form1">

<div ng-controller="expressionController">

<div>Array Expression</div>

Below is Marks obtained by <b>{{name}}</b> in different subjects are</br>

<p>In Hindi he obtained <b>{{marks[0]}}</b> marks</p>

<p>In English he obtained <b>{{marks[1]}}</b> marks</p>

<p>In Physics he obtained <b>{{marks[2]}}</b> marks</p>

<p>In Math he obtained <b>{{marks[3]}}</b> marks</p>

</div>

</form>

</body>

</html>

Now run above code of array expressions in angularjs example and check output that will be like as shown below

Output of AngularJS Array Expressions 

Following is the result of using array expressions in angularjs applications.

 

Angularjs Array Expressions Example Output or Result