如何在 ng-repeat 中使字段显示为没有 HTML 代码的文本
Posted
技术标签:
【中文标题】如何在 ng-repeat 中使字段显示为没有 HTML 代码的文本【英文标题】：How to make a field displays as text without HTML code inside ng-repeat 【发布时间】：2019-06-09 17:25:00 【问题描述】：我有一个类似的数据结构：
books = [
id: 'id1',
content:
name: '<p><span>name</span><span>1</span></p>',
price: 'price1',
date: 'd1'
,
id: 'id2',
content:
name: '<p><span>name</span><span>2</span></p>',
price: 'price2',
date: 'd2'
,
id: 'id3',
content:
name: '<p><span>name</span><span>3</span></p>',
price: 'price3',
date: 'd3'
]
如何在没有HTML的外部事件框中显示名称字段？ 我试过 ng-bind-html-unsafe="book.content['name'] 但它不起作用。
<body ng-controller="MainCtrl">
<div id='external-events'>
<h4 >Draggable books</h4>
<li ng-repeat="book in books track by $index"
id="book.id">
<ul class="fc-event" data-drag="true" data-jqyoui-options="revert: 'invalid'" jqyoui-draggable="index $index,placeholder:true,animate:true">
<li ng-bind-html-unsafe="book.content['name']"> book.content['name']</li>
<li>book.content['price']</li>
<li>book.content['date']<br></li>
</ul>
</a>
</div>
<div id='calendar-container'>
<div id='calendar'></div>
</div>
</body>
您可以在下面找到为此目的创建的代码笔
https://codepen.io/adier/pen/KbEpWQ?editors=1111
非常感谢。
【问题讨论】：
【参考方案1】：从 li 元素中删除 book.content['name']。你有一个属性指令ng-bind-html-unsafe 可以解决问题：
<li ng-bind-html="book.content['name']"></li>
更新
将ng-bind-html-unsafe 替换为ng-bind-html 指令。
在控制器中注入$sce 服务并为每本书执行$sce.trustAsHtml(book.content.name);
所以它看起来像：
$scope.books.forEach(function(book)
book.content.name = $sce.trustAsHtml(book.content.name);
)
小提琴：https://codepen.io/gudzdanil/pen/vvPJYr?editors=1111
【讨论】：
谢谢丹尼尔，但我应用了你的想法，但它也删除了名称的显示，这意味着我最终将只显示 2 个字段价格和日期，不显示名称。 非常感谢丹尼尔。以上是关于如何在 ng-repeat 中使字段显示为没有 HTML 代码的文本的主要内容，如果未能解决你的问题，请参考以下文章
InstantiationException：在 Kotlin 中使实体字段不可为空时，没有实体的默认构造函数
angularJS如何计算输入元素中显示的ng-repeat数据