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

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 210
    Comment on it

    Expressions in AngularJS is represented using double curly braces-{{ }}. Expressions are used to bind  the data to the HTML in the same way as the ng-bind directive of angular.


    Expressions using-


    1.numbers:-
    syntax- <p>Price of movie tickets : {{price * Noofpersons}} Rs</p>
    For example-

    <!DOCTYPE html>
    <html>
    <body>
    
      <div ng-app="" ng-init="price=150; Noofpersons =2">
        <p>Price of movie tickets: {{ price * Noofpersons }} Rs</p>
      </div>
    
      <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    
    </body>
    </html>


    2.strings:-
    syntax-<p>We are going for {{lunch + ' ' + and + ’ ’ + movie}}</p>
    For example-

    <!DOCTYPE html>
    <html>
    <body>
    
      <div ng-app="" ng-init="lunch='lunch';and='and;movie=movie>
        <p>We are going for {{lunch + ' ' + and +  + movie}}</p>
      </div>
    
      <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    
    </body>
    </html>


    3.object:-
    syntax-<p>Menu: {{menu.nonveg}}</p>
    For example:-

    <!DOCTYPE html>
    <html>
    <body>
    <div ng-app="" ng-init=menu={veg:Paneer,nonveg:Chicken}>
        <p>The menu contains {{ menu.veg }} {{ menu.nonveg }}</p>
      </div>
    
      <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    
    </body>
    </html>


    4.array:-
    syntax-<p>Some good scooties are {{ scooty[0] }}</p>
    For example:-

    <!DOCTYPE html>
    <html>
    <body>
    
      <div ng-app="" ng-init=scooty=[Activa,Maestro,Pleasure,Vespa]>
        <p>Some good scooties are {{ scooty[0] }}, {{ scooty[1] }}, {{ scooty[2] }}, {{ scooty[3] }}</p>
      </div>
    
      <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    
    </body>
    </html>

    Angular expressions are much like as javascript expressions as they also contain literals,operators and variables. But AngularJS expressions supports filters while javascript expressions don’t.

     

 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: