textarea双向绑定不适用于ng-model

时间:2017-11-30 09:52:14

标签: angularjs textarea angular-ngmodel two-way-binding

我正面临角度js的奇怪问题。 我正在使用textarea并具有默认值。但是当我手动更改textarea中的值时,我的控制器中没有更新它。

此外,其他范围未绑定为默认值。

我的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);
       }
});

第一期。在控制台中我只收到默认值..但是当我在textarea中更新时没有更新的值。 其次是$ scop.tmDynam.one没有使用$ scope.postrequest进行更新。 另外我使用的是ng-model而不是{{}}。 BUt仍然存在问题 请帮忙

1 个答案:

答案 0 :(得分:0)

由于您在ng-if内使用textarea,因此会创建一个独立的范围。因此您需要访问父范围。使用带有ng-model的textarea中的$parent.postrequest。      

演示

&#13;
&#13;
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);
       }
});
&#13;
<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>
&#13;
&#13;
&#13;