CODEWITHSUNDEEP
javascriptangularjs
K. MinYoung
K. MinYoung

Reputation: 27

Parse string to HTML in AngularJs

Source code:

<tr ng-repeat="x in orderCsList">
  <td class="ctn"><input type="checkbox" ng-model="x.checked"></td>
  <td class="ctn">{{ x.wdate }}</td>
  <td class="text-left">{{ x.wid }}</td>
  <td class="text-left">{{ x.content }}</td>
  <td class="text-left">{{ x.suc_yn }}</td>
</tr>

I have a property(x.contents) that the value is TEST<br>TEST. How can I "parse" it to HTML?

Actual result:

TEST`<br>`TEST

Expected result:

TEST
TEST

Upvotes: 1

Views: 1803

Answers (2)

developer033
developer033

Reputation: 24864

Use ngBindHtml directive.

Here's is a snippet working:

(function() {
 "use strict";
 angular.module('app', ['ngSanitize'])
   .controller('mainCtrl', function() {
     var vm = this;
     
     vm.parsed = 'TEST<br>TEST';
   });
})();
<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.5.7/angular-sanitize.min.js"></script>
</head>
<body ng-controller="mainCtrl as main">
  <strong>Before parse:</strong><br><span ng-bind="main.parsed"></span>
  <hr>
  <strong>After parse:</strong><br><span ng-bind-html="main.parsed"></span>
</body>
</html>

Upvotes: 1

Nguyen Sy Thanh Son
Nguyen Sy Thanh Son

Reputation: 5376

Did you try:

<td class="text-left" ng-bind-html="x.content"></td>

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

Make note that Sanitize required https://docs.angularjs.org/api/ngSanitize/service/$sanitize

Upvotes: 1

Related Questions