Convert a string to HTML using AngularJs

Question

Convert a string to HTML using AngularJs

Snippet:

<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) with the value TEST<br>TEST. How can I convert it to HTML?

Present outcome:

TEST`<br>`TEST

Desired outcome:

TEST
TEST

javascript angularjs

Answer 1

Answer №1

Have you attempted this:

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

Check out this link: https://docs.angularjs.org/api/ng/directive/ngBindHtml

Remember that Sanitize is necessary https://docs.angularjs.org/api/ngSanitize/service/$sanitize

Answer 2

Have you attempted this:

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

Check out this link: https://docs.angularjs.org/api/ng/directive/ngBindHtml

Remember that Sanitize is necessary https://docs.angularjs.org/api/ngSanitize/service/$sanitize

Answer 3

Answer №2

Try using the ngBindHtml directive.

Below is a code snippet that demonstrates how to use it:

(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>

Answer 4

Try using the ngBindHtml directive.

Below is a code snippet that demonstrates how to use it:

(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>

Convert a string to HTML using AngularJs

Answer №1

Answer №2

Similar questions

I will not be accessing the function inside the .on("click") event handler

AngularJS Gallery Showcase

Guide on retrieving the ID after a new entry is added using a trigger in Express.js and MySQL

Using Nodes to Populate an Array with References to Objects

Complete and send HTML forms with changing IDs

Error encounter in JSP is nested within another JSP file, both of which utilize jQuery

What is the best way to eliminate all occurrences of a specific element within an array?

Error: webpack is failing to load the style and CSS loaders

Using the for-each loop in Express.js with Node

Encountering an issue with React and material-ui-pickers date-io Jalaali Utils: receiving a TypeError stating that utils.getDayText is not recognized as

Disposing of memory in THREE JS when switching between routes in VUE

Check the data from the radio button selection

What could be the reason for the malfunctioning of my React Native vector icons?

Refresh a page in AngularJS with only a single click

What is the best way to change the name of a child object within a clone in three.js? (renaming child objects within clones)

I'm looking for recommendations on the best method to develop reusable components using JavaScript and jQuery in an elegant way

Obtain element by selecting a specific class using Javascript

Encountered an issue while trying to establish a connection between node.js and MongoDB

Retrieve the object filtered by a specific group from an array of data

Transformation of an Ajax array into an associative array