AngularJS Expressions is a set of literals, operators and variables that will be evaluated to a single value. For examples,
{{ 5 + 5 }} or {{ firstName + " " + lastName }}.
It can be written inside double curly braces, {{ expression }} or inside a directive, ng-bin="expression".
Below are some examples of different ways to use expressions.
AngularJS numbers
<div ng-app="" ng-init="quantity=2;price=3"> <p>Total cost: {{ quantity * price }}</p> or <p>Total cost: <span ng-bind="quantity * price"></span></p> </div>
Output
Total cost: 6
or
Total cost: 6AngularJS strings
<div ng-app="" ng-init="firstName='Joe'; lastName='Smith'"> <p>The name is: {{ lastName + ', ' + firstName }}</p> or <p>The name is: <span ng-bind="lastName + ', ' + firstName"></span></p> </div>
Output
The name is: Smith, Joe
or
The name is: Smith, JoeAngularJS arrays
<div ng-app="" ng-init="fruits=['apple', 'pineapple', 'banana']"> <p>The fruit is: {{ fruits[1] }}</p> or <p>The fruit is: <span ng-bind="fruits[1]"></span></p> </div>
Output
The fruit is: pineapple
or
The fruit is: pineappleAngularJS objects
<div ng-app="" ng-init="person={firstName:'Joe', lastName:'Smith'}"> <p>The name is: {{ person.lastName + ', ' + person.firstName }}</p> or <p>The name is: <span ng-bind="person.lastName + ', ' + person.firstName"></span></p> </div>
Output
The name is: Smith, Joe
or
The name is: Smith, JoeAngularJS JSON
<div ng-app="" ng-init="persons=[ {name:'Joe', age: 11}, {name:'Anne', age: 22}, {name:'Peter', age: 33} ]"> <p>{{ persons[0].name }} is {{ persons[0].age }} years old.</p> <ul> <li ng-repeat="x in persons">{{ x.name + ' is ' + x.age + ' years old.' }}</li> </ul> </div>
Output
About the author
Xuan Ngo is the founder of OpenWritings.net. He currently lives in Montreal, Canada. He loves to write about programming and open source subjects.