如何将 ngOptions 与包含 HTML 实体的字符串一起使用? [英] How do I use ngOptions with a string that contains HTML entities?

问题描述

我正在使用 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 实体的字符串一起使用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！