1

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>
ang123
  • 33
  • 6

2 Answers2

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

Phil
  • 157,677
  • 23
  • 242
  • 245
  • Thanks. That worked :) Can you please provide me with any suggestions for material where I can understand Interpolate concepts in Angular better? – ang123 Dec 12 '16 at 12:49
  • @ang123 you seem to understand them quite well. All you were missing was a hook to update `previewText` when the `to` model changed – Phil Dec 12 '16 at 22:45
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}}!
Skalyan
  • 1
  • 2