6

I'm learning Angular and making a todo app. Creating a todo uses a wysiwyg editor (textAngular). It looks like this:

create todo with wysiwyg

This works properly and gets saved as html to ng-model named todo.description. But when displaying this todo, the html from the description is displayed as plain text. Like so:

Display todo HTML as plain text

The description is just bound to the model

<p class="text-muted">{{todo.description}}</p>

I think this can be done very simple but I didn't find a solution. I tried the xmp tag, but that's not what I'm looking for.

How can I make the description display HTML and not text?

Community
  • 1
  • 1
RobSeg
  • 985
  • 4
  • 14
  • 37
  • probably this string is escaped. So you need to put raw text – Robert Jul 29 '15 at 09:09
  • possible duplicate http://stackoverflow.com/questions/17289448/angularjs-to-output-plain-text-instead-of-html – Bhavin Jul 29 '15 at 09:15
  • 2
    Question is basically duplicate indeed. But the answer given by @Vishnu is different and beter. I consider this question not having added value, but the answer does. – RobSeg Jul 29 '15 at 09:20
  • @Tonny seems to be two different questions. In the mentioned links, all html tag will be ignored and model will be rendered as plain text without style. – Sam Su Aug 05 '16 at 03:28

3 Answers3

7
<p class="text-muted" ng-bind-html="todo.description"></p>

https://docs.angularjs.org/api/ng/directive/ngBindHtml

Vishnu
  • 11,614
  • 6
  • 51
  • 90
1

You can use ngBindHtml to display your html code.

var app = angular.module('myApp', ['ngSanitize']);

app.controller('myCtrl', ['$scope',
  function($scope) {
    $scope.html = '<b>Test</b><u>Test</u>&lt;HTML';
  }
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-sanitize.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <span ng-bind-html="html"></span>
</div>
Christoph
  • 1,993
  • 1
  • 25
  • 33
1

you need to use $trustAsHTML filter of $sce (Strict contextual escaping)

Marcin Orlowski
  • 72,056
  • 11
  • 123
  • 141
Subash Selvaraj
  • 3,385
  • 1
  • 14
  • 17