Question

我使用ngOptions构建了一个选择菜单，但我的一个标签中有一个HTML实体&。标签显示为Books & Stuff而不是Books & Stuff。我的玉是这样的：

select(ng-show="isType === 'select'", id="{{id}}", ng-model="model", ng-options="o.id as o.label for o in options")

如何让HTML实体正确显示？

更新

我正在尝试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/。

Answer 1

您可以解决此问题的方法是使用ng-repeat和ng-bind-html（包含在ngSanitize）代替ng-options。这是一个工作示例

var app = angular.module('app', ['ngSanitize']);

<option ng-repeat="options in options" ng-bind-html="options.text" value="{{options.text}}"></option>

JSFiddle Link - 工作演示

此外，如果必须使用ng-options，请使用以下帮助函数在绑定之前先解码您的值

function htmlDecode(input) {
    var e = document.createElement('div');
    e.innerHTML = input;
    return e.childNodes[0].nodeValue;
}

JSFiddle Link - ng-options演示

Answer 2

在其他答案的基础上，您可以使用过滤器执行此操作，并获得继续使用ng-options的好处。示例过滤器：

myApp.filter('decoded', function() {
  "use strict";

  function htmlDecode(input) {
    var e = document.createElement('div');
    e.innerHTML = input;
    return e.childNodes[0].nodeValue;
  }

  return function(input) {
    return htmlDecode(input);
  }
});

然后您可以在ng-options中应用过滤器。例如：

ng-options="o.id as o.label | decoded for o in options"

我很惊讶这种方法有效，但它在1.3.20中为我做了，它比其他解决方案更优雅！

虽然这样做可能很昂贵。优化过滤器的es6版本：https://gist.github.com/DukeyToo/ba13dbca527f257a6c59

如何将ngOptions用于包含HTML实体的字符串？

2 个答案: