[email protected]      beta
Donate

Array expressions in AngularJS

Overview: Understanding Array Expressions in AngularJS, What is Array Expressions, Use of AngularJS Array expression with an example, AngularJS binds data to HTML using Expressions.

AngularJS Array Expressions

AngularJS Array Expression is same as JavaScript array. An array is a special variable, which can hold more than one value at a time. It is used to hold an array of object values. Using array expression angularjs bind array data to html.

AngularJS example using array expressions.

Example 1 : Here we are going to read ARRAY data from ng-init and display list of fruits using array expressions. The code looks like as written below.

<div ng-app="" ng-init="fruits = ['Apple', 'Orange', 'Mango', 'Banana']" >
    <p> Fruits  {{ fruits[0] +" , "+ fruits[1] +" , " + fruits[2] +" , " + fruits[3]}} </p>
</div>

Same example can also be written using ng-bind directive in angularjs. Final code looks like as writte below.

<div ng-app="" ng-init="fruits = ['Apple', 'Orange', 'Mango', 'Banana']" >
    <p> Fruits  <span ng-bind='fruits[0] +"-" +fruits[1]+" - " +fruits[2]+"-"  +fruits[3]'> </span></p>
</div>	

Output: Fruits , Apple , Orange , Mango , Banana

Try It Yourself ⇒


Example 2 : Here we are going to display list of fruits from ng-init and for dispalying list we use ng-repeat directive. The code looks like as written below.

<div ng-app="" ng-init="fruits = ['Apple', 'Orange', 'Mango', 'Banana']" >
 	<ul>
    	<li ng-repeat="item in fruits"> {{ item }} </li>
  	</ul>
 </div> 

**Output: ** * Apple * Orange * Mango * Banana

Try It Yourself ⇒

  Popular Tag
  Recent Posts
  Follow Us
If you find these tutorials helpful then please donate. It will lead me to do more tutorials.
Donate