AngularJS Expressions

Previous Next: AngularJS Directive
An Angular expression is JavaScript-like code snippets which can be writen inside double braces: {{expression}} and directly in directive attributes e.g. ng-click="expression". These expressions are evaluated against a scope object (we will read about scope mystery later).

In AngularJS to output the data we use expression directly in ng-bind directive or inside double braces : {{expression}}. In these two methods, Angular evaluates expression and outputs the data where they are used. See in example :-

AngularJS expressions can contain literals, operators, and variables like 1+2, a+b, user.name, items[index]. Control Statements, Function Declarations, RegExp, Bitwise, Comma, And Void are not allowed in Angular expressions.

Read further for more Angular expressions examples and to know difference between Angular expressions and javascript expressions. Otherwise move to next chapter to know Angular modules and create one.

*** More examples of Angular expressions ***


Number expression

<p>First AngularJS expressions: {{ 5 + 5 }}</p>

String expression

<p>Full Name: {{firstname + " " + lastname}}</p>

Object in expression

<p>Full Name: {{person.firstname + " " + person.lastname}}</p>

Array in expression

<p>Ranks three user: {{ranks[3]}}</p>

Code Ground

Lets change the value of CSS color property using AngularJS expression

See in Action

Source Code

<!doctype html>
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
  </head>
  <body>
    <div>
      <label>Color Name:</label>
      <input type="text" ng-model="colorName" placeholder="Enter color name here">
      <hr>
      <h1 style="color:{{colorName}}">Enter a color name and I will turn in that color :)</h1>
    </div>
  </body>
</html>

For more AngularJS Expressions examples and to try them goto AngularJS Expressions Examples

Previous Next: AngularJS Directive

Leave a Reply

Your email address will not be published. Required fields are marked *