Angularjs textarea not processing line breaks

Question

I have the following 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>

Inside my js controller is the following:

   $scope.updateComments = function()
     {


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



        })


     }

Problem is that whenever I process line breaks from the textarea input, it doesn't process it.

For example if I want to type the following line:

 first line
 second line

My output would like like this:

first linesecond line

How do I cater to this problem?

UPDATE:

In case this maybe a back end issue where PHP esacpes the html characters, here is my function inside my php controller:

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

 }

Solution 1

If I do understand you correctly, the issue is in these lines:

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

that the {{comments}} is not showing line breaks.

But that's natural HTML behaviour. And there is also natural HTML solution <pre>:

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

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

The <pre> tag defines preformatted text.

Text in a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks.

Solution 2

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

try something like this :)

Comments

[remedy.]

hi, {{comments}} is actually just a preview of what's being input into the textarea. Using <pre></pre> will display me the correct output if I enter a new linebreak, but after performing the updateComments() and it inserts into my database, the linebreaks disappear.

[remedy.]

when I input: first second I get an error:Syntax Error: Token 'second' is an unexpected token at column 7 of the expression [first second] starting at [second].

[Radim Köhler]

I see that you are passing the comment as url param. Could not you send that as a JSON? or FORM like (key/value pairs) - simply inside of the POST request BODY. It seems to me, that url has not encoded the line breaks...

[Hereblur]

@user3278616, Have you tried this: $log->comments= nl2br($comments);.