Post
Ask Question

Operators In AngularJS

Introduction

Introduction

Firstly, we need to download the AngularJS from https://angularjs.org. Also, you can give online link in your HTML page as, given below-

  1. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
What is ngApp?

Use auto-bootstrap for an AngularJS Application.

This is a root element of an Application.

What is ng-init ?

This directive allows you to evaluate an expression in the current scope. It does not create a new scope.

Example
  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <meta name="viewport" content="width=device-width" />  
  6.     <title>Operators in AngularJS</title>  
  7.     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
  8. </head>  
  9.   
  10. <body>  
  11.     <div ng-app="" ng-init="myArray=[100,350,200,250,540,5,6]">  
  12.         <p>The third element in array is : <span style="color:red">{{ myArray[2] }}</span></p>  
  13.         <hr />  
  14.         <p>Addition operator :<span style="color:red"> {{ myArray[2] + myArray[2]}}</span></p>  
  15.         <hr />  
  16.         <p>Subsraction operator :<span style="color:red"> {{ myArray[4] - myArray[0]}}</span></p>  
  17.         <hr />  
  18.         <p>Multiplication operator :<span style="color:red"> {{ myArray[5] * myArray[6]}}</span></p>  
  19.         <hr />  
  20.         <p>Division operator :<span style="color:red"> {{ myArray[2] / myArray[0]}}</span></p>  
  21.         <hr />  
  22.         <p>Modulus operator :<span style="color:red"> {{ myArray[6] % myArray[5]}}</span></p>  
  23.         <hr />  
  24.         <p>Equal to operator :<span style="color:red"> {{ myArray[2]==myArray[2] }}</span></p>  
  25.         <hr />  
  26.         <p>Equal value and equal type operator :<span style="color:red"> {{ myArray[2] === myArray[2]}}</span></p>  
  27.         <hr />  
  28.         <p>Not Equal to operator :<span style="color:red"> {{ myArray[6] != myArray[5]}}</span></p>  
  29.         <hr />  
  30.         <p>Greater than operator : <span style="color:red">{{ myArray[6] > myArray[5]}}</span></p>  
  31.         <hr />  
  32.         <p>Less than operator :<span style="color:red"> {{ myArray[6] < myArray[5]}}</span></p>  
  33.         <hr />  
  34.         <p>Greater than or equal to operator : <span style="color:red">{{ myArray[6] >= myArray[5]}}</span></p>  
  35.         <hr />  
  36.         <p>Less than or equal to operator : <span style="color:red">{{ myArray[6] <= myArray[5]}}</span></p>  
  37.         <hr />  
  38.         <p>Ternary operator :<span style="color:red"> {{ (myArray[6] > myArray[5]) ? "6 is greater than 5":"5 is less than 6"}}</span></p>  
  39.         <hr />  
  40.         <p> && operator : <span style="color:red">{{ myArray[5] < myArray[6] && myArray[6] > myArray[5]}}</span></p>  
  41.         <hr />  
  42.         <p> || operator :<span style="color:red"> {{ myArray[5] === myArray[6] || myArray[6] === myArray[5]}}</span></p>  
  43.         <hr />  
  44.         <p> ! operator :<span style="color:red"> {{!( myArray[5] === myArray[6])}}</span></p>  
  45.     </div>  
  46. </body>  
  47.   
  48. </html>  
Output
Output
Summary

This article will help fresher candidates to understand the operators in AngularJS.

 
Next Recommended Reading Ternary Operator Use In AngularJS