无法使用 Angular 获取 HTML textarea 输入文本

Posted 2023-05-07

【中文标题】无法使用 Angular 获取 HTML textarea 输入文本

【英文标题】：Can't acquire HTML textarea input text using Angular

【发布时间】：2017-02-27 03:38:52

【问题描述】：

我有一个使用 <textarea> 的 html 文件，我想使用 Angular 控制器获取其输入。相关HTML代码如下：

<div class="list">
  <textarea
    placeholder="Comments"
    id="feedback"
    ng-model="feedbackInput">
  </textarea>
</div>

这是我的 javascript 控制器的相关代码，我觉得它在正确的轨道上，但会产生输出：

$scope.finishSummary = function()
    $scope.feedbackInput = "";
    console.log( "Feedback text = " + JSON.stringify($scope.feedbackInput) );

产生输出：

反馈文字=“”

我仅出于调试目的使用“console.log()”，但我希望能够从<textarea> 中查看实际输入值。我对 HTML 编码比较陌生，尤其是在使用 Angular 方面，所以请原谅我对这件事缺乏经验。最后我只想检查<textarea>中是否没有文字。有关如何执行此操作的任何建议，以便我可以将来自 <textarea> 的数据输入注入到 Angular 中？谢谢！

【参考方案1】：

您正在重置值“”，只需删除该行，

$scope.finishSummary = function()   
    console.log( "Feedback text = " + JSON.stringify($scope.feedbackInput) );

另外你没有在代码中的任何地方调用finishSummary()，你可以在ng-blur中调用它来查看变量的变化

 <textarea
    placeholder="Comments"
    id="feedback"
    ng-blur="finishSummary()"
    ng-model="feedbackInput">
  </textarea>

DEMO

【讨论】：

或者将 console.log 移到重置它的行上方！ :)

@Sajeetharan 我忘了提到我有一个调用 finishSummary() 的按钮。但我做了你建议的改变，现在我得到“反馈文本 = 未定义”。还有其他建议吗？

@Justin 可能你做错了什么，检查 plunker plnkr.co/edit/gYk1TpBFz332SaaF1AkN?p=preview

@Sajeetharan 抱歉耽搁了。我很想将其标记为“已回答”，但由于某种原因它仍然给我“未定义”，即使我几乎完全拥有 Plunker 中的内容。