CODEWITHSUNDEEP
javascriptangularjs
Robert
Robert

Reputation: 167

How to use replace & with & in angularjs

Problem: I am having a hard time to replace"&amp ;" to &. Is their a way to use javascript to replace the ampersand to &.

<div class="col-md-4 no-margin padding" id="change">
 <strong>Specialty: </strong>{{e.Specialty}}
</div>

I would like to replace the "&amp ;" when it grabs the data from the database to "&".

So currently, it will display "Nursing &amp ; Doctor" rather then "Nursing & Doctor"

How can I achieve this using replace. I have tried ng-show, Santize, and ng-bind-html but have not worked out for me.

Upvotes: 2

Views: 5824

Answers (4)

taylor michels
taylor michels

Reputation: 528

This can be done using 

<span ng-bind-html="e.Specialty"></span>

and include ['ngSanitize'] in your module

plunkr example: https://plnkr.co/edit/d6Anjr7vL6un9d0yL5ZW?p=preview

Upvotes: 1

bryanfeller
bryanfeller

Reputation: 336

This is not necessarily the best way but for those of you that need to do this you can use this:

var parser = new DOMParser;
var dom = parser.parseFromString(YOURSTRING,'text/html');
var decodedString = dom.body.textContent;

Upvotes: 2

ManishSingh
ManishSingh

Reputation: 1944

You have to use $sce service and trustAsHtml so that Angular will not do the encoding and display the output without output encoding. Details are here https://docs.angularjs.org/api/ngSanitize

Steps are below-

  1. Include ngSanitize module - angular.module('app', ['ngSanitize']);
  2. Inject $sce service in your controller
  3. Truest output using - vm.Specialty= $sce.trustAsHtml(Specialty);
  4. Display to the user without output encoding - Specialty: bind-html-compile=e.Specialty

Upvotes: 1

Kyle Krzeski
Kyle Krzeski

Reputation: 6527

I would use a filter...

JavaScript:

myApp.filter('andFilter', function() {
  return function(item) {
    return item.replace(/&amp ;/g, '&');
  }
});

HTML:

<div class="col-md-4 no-margin padding" id="change">
 <strong>Specialty: </strong>{{e.Specialty | andFilter}}
</div>

Upvotes: 0

Related Questions