Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Expressions in AngularJS

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 100
    Comment on it

    AngularJS expressions are used to bind application data with HTML element. This expressions works in same way as we write in write in ng-bind directives. Expressions are written inside two curly braces as {{expression}}. This expressions are included in HTML elements.
    ng-app directive is used to bind angular expressions. If we remove ng-app then it will show as simple text.

     

    Example of Angular expression:

    <!DOCTYPE html>
    <html>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <body>
    
    <div ng-app="">
      <p>Expression example: {{ 1 + 1 }}</p>
    </div>
    
    </body>
    </html>

    OUTPUT :

    Expression example: 2

     

    Different forms of expressions :

     

    1. Angular expressions using numbers :

    We can use numbers, numeric values , decimal values in Angular expressions.

    Example:

    <!DOCTYPE html>
    <html>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <body>
    
    <div ng-app="">
    <p>Expression using number example : {{ 5 * 10 }}</p>
    </div>
    
    </body>
    </html>

    OUTPUT :

    Expression using number example : 50

     

    2. Angular expressions using strings:

    We can use strings in Angular expressions.

    Example:

    <!DOCTYPE html>
    <html>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <body>
    
    <div ng-app="">
    
    <p>Expression using string example <br/>
    My name: {{ "Mona" + " " + "Jain" }}</p>
    
    </div>
    
    </body>
    </html>

    OUTPUT :

    Expression using string example
    My name: Mona Jain

     

    3. Angular expressions using objects:

    We can use objects in Angular expressions.

    Example:

    <!DOCTYPE html>
    <html>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <body>
    
    <div ng-app="" ng-init="user={firstName:'Mona',lastName:'Jain'}">
    <p>Expression using object example  <br/>
    User name is {{user.firstName + " " + user.lastName }}</p>
    
    </div>
    
    </body>
    </html>

    OUTPUT :

    Expression using object example

    User name is Mona Jain

     

    4. Angular expressions using array:

    We can use array in Angular expressions.

    Example:

    <!DOCTYPE html>
    <html>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <body>
    
    
    <div ng-app="" ng-init="vowels=['a','e','i','o','u']">
    <p>Expression using array example <br/>
     The last vowel is {{ vowels[4] }}</p>
    
    </div>
    
    </body>
    </html>

    OUTPUT :

    Expression using array example :

    The last vowel is u

     

    Hope, this blog will help you. Thanks

     

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: