Angular1 Expression

angular1

// Angular 1 - Bracketed Expressions:

Angular expressions are similar to JavaScript expressions.  They can contain 
literals, operators, and variables.

Consider the following code:

angular.module('myApp').controller('MainController',['$scope','$interval', 
  function($scope, $interval) {
    $scope.randomValue = -999;
    $interval(function() {
      $scope.randomValue = Math.round(Math.random() * 1000000);
    }, 2000);
  }
]);

<body ng-controller="MainController">
  <p>Standard bracket expression:</p>
  <p>{{randomValue}}</p>
</p>

When the above code is run, it first displays -999, and every 2 seconds, the 
UI is updated with random values.

If we change the code to:

<p>{{::randomValue}}</p>

It will only display -999, and the UI is not updated every 2 seconds.  This 
double-colon expression is called one-time expression.

With the standard expression syntax (just curly braces, without the double 
colon), Angular creates a series of watchers that watch the value for changes.  
This is a performance cost, and so if we have something that we know isn't going 
to change, we want to use the double-colon syntax.

Suppose that we have an array variable in our scope object:

$scope.names = ['David', 'Tom', 'Joe'];

We can access these values:

<p>{{names[1]}}</p>

Suppose that we have two variables in our scope:

$scope.qty = 20;
$scope.cost = 1.99;

We can use perform calculation:

<p>{{qty * cost}}</p>

The above expression dynamically calculate quantity * cost whenever we change 
the value of the qty variable or the cost variable because the watchers watch 
both of these variables.
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License