Using Expressions in AngularJS, Print controller values in the AngularJS view, Display controller scope values in view

We can bind data to the html with the help of AngularJS expression. AngularJS expression are written in {{ angular expression }}. These are same like Javascript expressions.

Some Examples:

Print totalamount expression

Total Cost is : {{ totalamount }}

Expression with numerical operations

Double the Total Cost : {{ totalamount * 2 }}

Access the object in the expression

Access the value in amount object : {{ amount.profit }}

Demo:

Expressions in AngularJS

Print totalamount expression
Total Cost is : {{ totalamount }} Rupees

Expression with numerical operations
Enter the value to be doubled:
Double the Total Cost : {{ amount.invest * 2 }} Rupees

Access the object in the expression
Access the value in amount object : {{ amount.profit }} Rupees

Example
<html>
 
<head>
  <title>Expressions in AngularJS</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
 
<body>
  <div ng-app="myApp" ng-controller="myController">
    <div><strong>Print totalamount expression</strong></div>
    <span>Total Cost is : {{ totalamount }} Rupees</span>
 
    <div><strong>Expression with numerical operations</strong></div>
    <span>Enter the value to be doubled:</span>
    <span><input type = "text" ng-model = "amount.invest"></span>
    <div> Double the Total Cost : {{ amount.invest * 2 }} Rupees</div>
 
    <div><strong>Access the object in the expression</strong></div>
    <span> Access the value in amount object : {{ amount.profit }} Rupees</span>
 
  </div>
 
  <script> 
         var myApp = angular.module("myApp", []);
         myApp
          .controller('myController', function($scope) {
            $scope.amount = {
               profit: 100,
               invest: 900,
            };
            $scope.totalamount = 1000;
         });
      </script>
</body>
 
</html>
Category: