Angular模板变量动态替换标记

Question

我正在处理繁重的数据集。

所以我在表中放置一个嵌套变量

{{entry.text}}

但这可能有几个名称，如

Clare Butterfield / n / r Barry Burton

- 我真的想用br标签替换回车

所以每个名字都在另一行上

{{(entry.text).replace("/n", "<br>")}}

Answer 1

您需要两件才能完成此操作：

1）一个过滤器，它将接收文本并将/n替换为<br/>，并且

2）ng-bind-html指令使角度使用<br/>而不是仅显示Clare Butterfield <br/> Barry Burton

最后你的html看起来像这样：

<span ng-bind-html="::entry.text | newLineFilter"/>

有关您需要的类似过滤器的示例，请在此处查看此SO问题： Angular filter to replace all underscores to spaces

对于ngBindHTML指令，请参见此处： https://docs.angularjs.org/api/ng/directive/ngBindHtml

有任何问题吗？

P.S。由于您的数据集很大，您可能会注意到我在上面的示例中添加了2个冒号，表示它使用的是一次性绑定。这样可以防止角度过于频繁地重新计算值并节省性能。这些并不是绝对必要的，因此如果您发现文本未按预期更新，请将其删除。