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

Posted 2023-05-07

【中文标题】textarea 双向绑定不适用于 ng-model

【英文标题】：textarea two way binding not working with ng-model

【发布时间】：2018-05-14 04:53:16

【问题描述】：

我正面临 Angular js 的一个奇怪问题。 我正在使用 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 而不是 。但是问题仍然存在 请帮忙

【参考方案1】：

由于您在 ng-if 内使用 textarea，它会创建一个隔离范围。因此您需要访问父范围。在 textarea 中使用 ng-model 和 $parent.postrequest。

演示

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>

【讨论】：

...有效..但是我的第二个问题仍然存在...当我在与 $scope.tmDynam.one 绑定的文本字段中输入值时..它的值没有更新到我的 $scope .postrequest。因为我已经将它与我的字符串连接起来了。这两种方式绑定在这里不工作吗..？

因为角度双向绑定不会影响对象属性。将$scope.postrequest = "'event':'event_id':" + $scope.tmDynam.one+" ,'note':'Testing', 'is_display_price': 'true', 'ticket_ids':["+$scope.tmDynam.two+"] "; 移入goDynamicTm 函数