将 js 对象的下标渲染为 HTML

Question

我正在开发一个 Angular 1X 应用程序，该应用程序已将所有图标标签存储到这样的 js 对象中

var labels={
  ........
  iconlabel_o2:"O<sub>2</sub>",
  iconLabel_co2:"CO<sub>2</sub>",
  iconLabel_h20:"H<sub>2</sub>O",
  ........
}

iconLabel 的值被调用到 HTML 中

<p>{{u.iconLabel}}</p>

但这些值并未呈现为下标。它只显示整个字符串。像这样……

O<sub>2</sub>
CO<sub>2</sub>
H<sub>2</sub>O

如何解决这个问题？

Answer 1

您可以使用ng-bind-html 指令来实现：

<p ng-bind-html="u.iconLabel"></p>

也请看一个类似的问题：AngularJS - Render HTML tags that are contained in a string