textarea two way binding not working with ng-model

Question

i am facing a weird issue with angular js. I am using a textarea and have a default value for that. But when i change the value in the textarea manually its not being updated in my controller.

Also the other scope is not being binded into the default value.

my Html

<div ng-controller="req" class ="ng-cloak">
 <form name="dynamic_fields_tm" ng-submit="goDynamicTm()">
                         <input type="text" ng-model="tmDynam.one">
                         <input type="submit" value="Go!" ng-show="tm_dynamic1">
                     </form>
 <div class="request" ng-if="postrequest_disp">
   <textarea>{{postrequest}}</textarea> 
 </div>
</div>

Js

app.controller('req', function($scope ,$rootScope ,$http ,$location ,$window, $timeout) {
 $scope.postrequest = "{'event':{'event_id':" + $scope.tmDynam.one+"} ,'note':'Testing', 'is_display_price': 'true', 'ticket_ids':["+$scope.tmDynam.two+"] }";
       $scope.postrequest_disp = true;
       $scope.tm_dynamic1 = true;
       $scope.goDynamicTm = function()
       {             
          console.log($scope.postrequest);
       }
});

First Issue. in the console i am only receiving the default value..but not the updated value when i update in textarea. Second is the $scop.tmDynam.one is not being updated with the $scope.postrequest. ALso i have used ng-model instead of {{}}. BUt still issue persists Please help

Sachila Ranawaka · Answer 1 · 2017-11-30T10:17:54.930

Since you are using textarea inside ng-if it creates an isolated scope.So you need to access the parent scope. Use the ng-model in textarea with the $parent.postrequest.

Demo

var app = angular.module("myApp",[]);
app.controller('req', function($scope ,$rootScope ,$http ,$location ,$window, $timeout) {
$scope.tmDynam = {one:'', two: ''}
 $scope.postrequest = "{'event':{'event_id':" + $scope.tmDynam.one+"} ,'note':'Testing', 'is_display_price': 'true', 'ticket_ids':["+$scope.tmDynam.two+"] }";
       $scope.postrequest_disp = true;
       $scope.tm_dynamic1 = true;
       $scope.goDynamicTm = function()
       {           $scope.postrequest = "{'event':{'event_id':" + $scope.tmDynam.one+"} ,'note':'Testing', 'is_display_price': 'true', 'ticket_ids':["+$scope.tmDynam.two+"] }";   
          console.log($scope.postrequest);
       }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="req" class ="ng-cloak">
 <form name="dynamic_fields_tm" ng-submit="goDynamicTm()">
                         <input type="text" ng-model="tmDynam.one">
                         <input type="submit" value="Go!" ng-show="tm_dynamic1">
                     </form>
 <div class="request" ng-if="postrequest_disp">
   <textarea ng-model="$parent.postrequest"></textarea> 
 </div> 
</div>
</div>

...that worked..But my second issue still persists...when i enter value in textfield binded with $scope.tmDynam.one.. Its value is not getting updated to my $scope.postrequest. As i have concatenated it with my string..Doesn't the two way binding work here..? — ronit, Nov 30 '17 at 10:14
because angular two way binding does not effect on the object properties. move the `$scope.postrequest = "{'event':{'event_id':" + $scope.tmDynam.one+"} ,'note':'Testing', 'is_display_price': 'true', 'ticket_ids':["+$scope.tmDynam.two+"] }";` in to `goDynamicTm` function — Sachila Ranawaka, Nov 30 '17 at 10:16

textarea two way binding not working with ng-model

1 Answers1