Angularjs textarea不处理换行符

Posted 2023-03-05

【中文标题】Angularjs textarea不处理换行符

【英文标题】：Angularjs textarea not processing line breaks

【发布时间】：2014-11-01 08:56:51

【问题描述】：

我有以下html：

                <div class="form-group">
                    <div class="input-group col-sm-12">
                        <label for="" class="control-label">Comments</label>                        
                        <div class="controls">
                            <textarea id="txtArea" rows="10" cols="50" ng-model="$parent.comments" type="text"  ng-trim="false"></textarea>
                            comments
                        </div>
                    </div>
                </div>

在我的 js 控制器内部如下：

   $scope.updateComments = function()
     


        $http(
            method: 'POST',
            url: '/create_comment/' + $scope.id+ '?comments=' + $scope.comments,
        )
        .success(function(data)
            $('#myModalComment').modal('hide');



        )


     

问题是每当我处理来自 textarea 输入的换行符时，它都不会处理它。

例如，如果我想输入以下行：

 first line
 second line

我的输出是这样的：

第一行第二行

我该如何解决这个问题？

更新：

如果这可能是 php 逃避 html 字符的后端问题，这是我的 php 控制器中的函数：

 public function createComments($id)
 
    $comments = Input::get('comments');
    $log= Logger::find($id);
    $log->comments= $comments;
    $log->save();

 

【参考方案1】：

$scope.$watch('$parent.comments', function(newVal) 
    var newVal= newVal.replace(/\r?\n/g, '<br />');
    $scope.$parent.comments = newVal;
,true);  

试试这样的:)

【讨论】：

当我输入时：第一秒我得到一个错误：语法错误：标记“第二”是表达式 [第一秒] 的第 7 列中的意外标记，从 [秒] 开始。

【参考方案2】：

如果我的理解正确，问题出在以下几行：

 <textarea id="txtArea" rows="10" cols="50" 
    ng-model="$parent.comments" type="text"  ng-trim="false"></textarea>
 comments

comments 没有显示换行符。

但这是自然的 HTML 行为。而且还有天然的HTML解决方案<pre>：

 <textarea id="txtArea" rows="10" cols="50" 
    ng-model="$parent.comments" type="text"  ng-trim="false"></textarea>
 <pre>comments</pre>

见http://www.w3schools.com/tags/tag_pre.asp:

<pre> 标签定义了预格式化的文本。

<pre> 元素中的文本以固定宽度字体（通常是 Courier）显示，并且保留空格和换行符。

【讨论】：

嗨，comments 实际上只是预览输入到文本区域的内容。如果我输入新的换行符，使用<pre></pre> 将显示正确的输出，但在执行updateComments() 并将其插入我的数据库后，换行符消失了。

我看到您将评论作为 url 参数传递。您不能将其作为 JSON 发送吗？或 FORM 之类的（键/值对） - 只是在 POST 请求 BODY 中。在我看来，该网址没有对换行符进行编码......

@user3278616，你试过这个吗：$log->comments= nl2br($comments);。