New line issue in Angularjs

Question

I have a form in AngularJS. In the form I have a field named "description". If user enters description as:

This is description:

1)point 1

2)point 2

I am saving this as :

"This is description:<br/>1)point 1 <br/> 2)point 2"

Now after saving it,to show it on page I am using something like :

 <span class="summary"><em ng-bind-html="(x.DES)"></em></span>

This code is working.

If users click on the record then I am loading the form in edit mode :

the form having the line in edit mode to show the description:

 <textarea  ng-focus="onFocusDescrption()" maxlength="600" name="cepDes" class="form-control" rows="3" cols="16"  ng-model="description" ng-disabled="isDescDisable" placeholder="Enter a description ..." id="description"></textarea>

Now the problem comes here. In controller I am setting the model value as :

$scope.description = $scope.timeEntry.DES;

Where in $scope.timeEntry.DES is having the value which is saved. The value is displayed in textarea having <br>.

It seems you have both ng-model="description" and ng-bind-html="(description)". You should only need ng-bind-html, and not ng-model. Also, your example is missing the n, in ng-bind-html. — Daan van Hulst
– Daan van Hulst, Commented Jan 21, 2016 at 11:48
I was mistaking, you can't actually use markup in a textarea. I've created an answer which offers a solution. — Daan van Hulst
– Daan van Hulst, Commented Jan 22, 2016 at 7:42
One more issue is there is user type '\' in then json.stringify() convert it to '\\' — Suresh Negi
– Suresh Negi, Commented Feb 2, 2016 at 10:44

Community · Accepted Answer · 2017-05-23 10:28:25Z

0

It doesn't seem to be possible to use markup in a textarea as you can see in this plunkr I have created, and more information in this post. A solution would be to use a directive which allows for editable content. This way you can use a div for displaying and editing:

<div ng-bind-html="modelname"
         contenteditable="true"
         ng-model="modelname">
</div>

The directive (also on github):

app.directive("contenteditable", function() {
  return {
    restrict: "A",
    require: "ngModel",
    link: function(scope, element, attrs, ngModel) {

      function read() {
        ngModel.$setViewValue(element.html());
      }

      ngModel.$render = function() {
        element.html(ngModel.$viewValue || "");
      };

      element.bind("blur keyup change", function() {
        scope.$apply(read);
      });
    }
  };
});

edited May 23, 2017 at 10:28

CommunityBot

11 silver badge

answered Jan 22, 2016 at 7:42

Daan van Hulst

1,43615 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Suresh Negi Over a year ago

Thanks for the code you provide above.Yes it's working.Using div instead of textarea.

Suresh Negi Over a year ago

In the plunkr if I use : $scope.ngModelVar = "This is description:\n1)point 1 \n 2)point 2"; $scope.ngBindHtmlVar = "This is description:\n1)point 1 \n 2)point 2"; Then it's working.

Collectives™ on Stack Overflow

New line issue in Angularjs

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related