Interpolation in Angular JS

Question

I am trying to understand Interpolation concepts in Angular JS and I have written this code. I am trying to enter a text in input box and based on the template in text area tag it should replace the variable and update the final message dynamically in previewText field. How to achieve this.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body ng-app="myApp">
<div ng-controller="MyController">
<input ng-model="to" 
      type="email" 
      placeholder="Recipient" />
<textarea ng-model="emailBody"></textarea>
<pre>{{ previewText }}</pre>
</div>
</body>
<script>
angular.module('myApp', []).controller('MyController',function($scope,   $interpolate) {
  $scope.to = 'text'; //static value.Trying to make this dynamic. How     to achieve it??
 //      $scope.$watch('to',function(newValue,oldValue,scope)
  //{
    //$scope.to = $interpolate($scope.to)($scope);
  //});
  $scope.emailBody = 'Hello {{ to }},My name is Ari too!';
  // Set up a watch
  $scope.$watch('emailBody', function(body) {
    if (body) {
      var template = $interpolate(body);
      $scope.previewText = 
        template({to: $scope.to});
    }
  });
  });



 </script>
 </html>

Phil · Accepted Answer · 2016-12-12 04:58:42Z

1

Simply remove your $scope.watch and replace it with

$scope.update = function() {
  $scope.previewText = $interpolate($scope.emailBody)($scope);
};
$scope.update();

then add

ng-change="update()"

to both your <input> and <textarea>.

Note that since you've specified <input type="email">, the to model will only be valid and set if the input value is an email address, excluding initial state.

http://plnkr.co/edit/AOR6a7TAYhoXYSnJh2r4?p=preview

answered Dec 12, 2016 at 4:58

Phil

166k25 gold badges265 silver badges269 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ang123 Over a year ago

Thanks. That worked :) Can you please provide me with any suggestions for material where I can understand Interpolate concepts in Angular better?

Phil Over a year ago

@ang123 you seem to understand them quite well. All you were missing was a hook to update previewText when the to model changed

Skalyan · Accepted Answer · 2018-06-20 10:27:44Z

0

Interpolation markup with embedded expressions is used by AngularJS to provide data-binding to text nodes and attribute values.

An example of interpolation is shown below:

Hello {{imagename}}!

edited Jun 20, 2018 at 10:27

answered Jun 20, 2018 at 10:21

Skalyan

12 bronze badges

Collectives™ on Stack Overflow

Interpolation in Angular JS

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related