Special characters are displayed as ascii characters in textarea angularjs

Question

Actual string - • Is Recovery Team assembled? • Critical timing for SLA's - are any impacted now, when will be if incident prolongs?

String getting displayed in textarea -

Please suggest..

HTML code:

        <div class="form-group has-feedback">

            <textarea class="form-control form-control-BCC" name="Notes" ng-model="buisnessSaveCommunication.BusinessContinutiydata.KeyMessage" spellcheck="true"></textarea>

        </div>

here buisnessSaveCommunication in ng-model is alias.

angularjs :

scope.BusinessContinutiydata.KeyMessage = scope.keyMessge;

@31piy added code in question now. its simple scope value assignment. but in place of apostrophe symbol it is displaying some ascii characters. — Prasad Shigwan, Jul 29 '17 at 06:36
Please add your actual string you are assigning. I mean scope.keyMessage — Surjeet Bhadauriya, Jul 29 '17 at 06:37
@SurjeetBhadauriya from database only i'm getting this string "" • Critical timing for SLA's - are any impacted now, when will be if incident prolongs?"" — Prasad Shigwan, Jul 29 '17 at 06:41
@SurjeetBhadauriya i'm also not able to use $sce.trustAsHtml in textarea. — Prasad Shigwan, Jul 29 '17 at 06:43
So you are getting "Critical timing for SLA's - are any impacted now, when will be if incident prolongs". My question is, did you get " SLA's " from the database or it was being changed when binding to textarea. — Surjeet Bhadauriya, Jul 29 '17 at 06:47
@SurjeetBhadauriya - from database only getting value like this "Critical timing for SLA's" - but in database it is stored as "Critical timing for SLA's". — Prasad Shigwan, Jul 29 '17 at 06:57
@PrasadShigwan here you go prasad.. Please find below answer. :) — Pankaj Parkar, Jul 29 '17 at 07:22

Pankaj Parkar · Accepted Answer · 2017-07-29T08:15:32.090

The problem is you can't directly show encoded entities inside textarea/input box. What you could do is, before binding the value to textarea decode it. For the same use $sanitize service of ngSanitize. Simply passing html to $sanitize service will return decoded html.

//Make sure you included `ngSanitize` module in your app module dependency
//Also add angular-sanitize.js with the same version that Angularjs has, otherwise it may conflict.
angular.module('app', ['ngSanitize'])
  .controller('TestCtrl', function($scope, $sce, $sanitize) {
    $scope.test = $sanitize('Critical timing for SLA&#39;s');
  })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-sanitize.min.js"></script>
<body ng-app="app" ng-controller="TestCtrl">
  <h1>{{test}}!</h1>
</body>

Otherwise you just need to do manually decoding before binding values to your textarea. You can refer What's the right way to decode a string that has special HTML entities in it? for the same

Demo Here

In such cases I'd prefer you to use TextAngular component, which provides similar thing with many additional feature.

Special characters are displayed as ascii characters in textarea angularjs

1 Answers1