在AngularJs中将字符串解析为HTML

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?

我有一个属性(x.contents),其值为TEST
TEST。如何将其“解析”为HTML?

Actual result:

TEST`<br>`TEST

Expected result:

TEST
TEST

2 个解决方案

#1

Did you try:

你试过了吗:

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

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

请参见链接:https://docs.angularjs.org/api/ng/directive/ngBindHtml

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

请注意Sanitize必需https://docs.angularjs.org/api/ngSanitize/service/$sanitize

#2

Use ngBindHtml directive.

使用ngBindHtml指令。

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>

#1