【问题标题】:Angular - Cant update textarea after user inputAngular - 用户输入后无法更新文本区域
【发布时间】:2017-03-20 06:44:12
【问题描述】:

我对 Anuglar 有疑问。 ng-bind 一旦用户输入改变了 textarea 的值,就不会更新它。

注意:我使用 ng-bind 而不是 ng-model 的原因是我需要 ng-bind-html,因为输入是在使用 ngSanitize 处理的 html 中。

演示: http://jsfiddle.net/Lvc0u55v/11682/

以下是查看即时消息的方法:从下拉列表中选择任何值,然后更新文本区域。但是选择New Value 并在文本区域中放置一些文本。然后将选择框更改为任何值,textarea 将不再更改!

代码:

[脚本]

$scope.msg_templates = []; //array of {id, title, msg} filled with required stuff
$scope.msg_templates[0] = {id:'0', title:'{New Value}', msg:''}; //first item is to enter new value
$scope.msg_templates[1] = {id:'1', title:'TTT', msg:'TTT'};
$scope.msg_templates[2] = {id:'2', title:'XXX', msg:'XXX'};
.
.

//set default value
$scope.msg_sel = '';
$scope.msg_field = '';

//change msg function
$scope.change_msg_sel = function()
{
    if($scope.msg_sel==null){
    $scope.msg_field = '';
    return false;
    }

    $scope.msg_field = $scope.msg_sel.msg;
};

[HTML]

<select ng-model="msg_sel" ng-change="change_msg_sel()" ng-options="v.title for v in msg_templates">
<option value="">Please Select -</option>
</select>

<textarea ng-bind-html="msg_field"></textarea>

【问题讨论】:

  • 是有意使用v.title for v in msg_templates 还是假设使用comm_templates?你应该使用&lt;textarea ng-model="msg_field" 而不是&lt;textarea ng-bind="msg_field"
  • 其实是msg_templates,这个例子忘记在这里重命名了。
  • 对我来说很好jsfiddle。 Only difference in my fiddle is I removed the wrapping ngApp from &lt;body ng-app="myApp"&gt; because you can't have an ng-app' within another. You are aware that $scope.msg_templates[0]` has blank msg so when selected nothing will show.
  • 是的,我知道它是空的,这就是它的假设。
  • 没有你的版本不工作。选择“TTT”,改变数值,然后改变选择框。

标签: angularjs textarea ng-options ng-bind


【解决方案1】:

自己解决问题,只需使用 good-ol-always-working-vintage-JS 手动覆盖 $scope.change_msg_sel 中的字段值!

document.getElementById('msg_field').value=$scope.msg_field;

(对于amazing angular!)

【讨论】:

  • 嗨,先生,我遇到了类似的问题,我是 angularjs 的新手,所以我无法理解如何在我的情况下解决它,我有一个文本区域,用户可以在其中选择预先编写的下拉列表中的文本,但一旦用户编写任何手动文本,angularjs 就会停止更新该值。你能帮我解决这个问题吗?这是我的问题的链接 - stackoverflow.com/q/69612912/16632970
猜你喜欢
  • 2017-11-25
  • 1970-01-01
  • 2020-09-13
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多