问题描述
我正在使用 ngOptions 构建一个选择菜单,但我的一个标签中有一个 HTML 实体&
.标签显示为 Books &东西
不是书籍和东西
.我的玉是这样的:
I'm using ngOptions to built a selection menu but one of my labels has an HTML entity in it &
. The label shows up as Books & Stuff
not Books & Stuff
. My jade is this:
select(ng-show="isType === 'select'", id="{{id}}", ng-model="model", ng-options="o.id as o.label for o in options")
如何让 HTML 实体正确显示?
How can I get HTML entities to display properly?
更新
我正在尝试sal的答案:
I'm trying the answer by sal:
select(ng-show="isType === 'select'", id="{{id}}", ng-model="model")
option(ng-repeat="o in options", ng-bind-html="o.label", value="{{o.id}}")
这会显示正确的 html 实体,但不再根据模型选择正确的选项.例如,请参见 http://jsfiddle.net/ucLvjvkn/1/.
An this displays the correct html entity but the correct option is not selected any more based on the model. See http://jsfiddle.net/ucLvjvkn/1/ for example.
推荐答案
解决这个问题的一种方法是使用 ng-repeat
和 ng-bind-html
(包含在 ngSanitize 中)代替 ng-options
.这是一个工作示例
A way you can solve this is to use ng-repeat
along with ng-bind-html
(included with ngSanitize) in place of ng-options
. Here is a working example
var app = angular.module('app', ['ngSanitize']);
<option ng-repeat="options in options" ng-bind-html="options.text" value="{{options.text}}"></option>
JSFiddle 链接 - 工作演示
此外,如果您必须使用 ng-options
使用以下辅助函数在绑定之前先解码您的值
Furthermore, if you must use ng-options
use the following helper function to decode your values first before binding
function htmlDecode(input) {
var e = document.createElement('div');
e.innerHTML = input;
return e.childNodes[0].nodeValue;
}
JSFiddle 链接 - ng-options
演示
这篇关于如何将 ngOptions 与包含 HTML 实体的字符串一起使用?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!