我有一个像这样的数据结构:
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
非常感谢。
最佳答案
从 li 元素中删除 {{book.content['name']}}。您有一个属性指令 ng-bind-html-unsafe 可以实现这一点:
<li ng-bind-html="book.content['name']"></li>
更新
将 ng-bind-html-unsafe 替换为 ng-bind-html 指令。
在 Controller 中注入(inject)$sce服务并为每本书执行$sce.trustAsHtml(book.content.name);
所以它看起来像:
$scope.books.forEach(function(book) {
book.content.name = $sce.trustAsHtml(book.content.name);
})
fiddle :https://codepen.io/gudzdanil/pen/vvPJYr?editors=1111
关于javascript - 如何使字段显示为文本而无需 ng-repeat 内的 HTML 代码，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54203273/