如何将ngOptions与包含HTML实体的字符串一起使用

How do I use ngOptions with a string that contains HTML entities?

本文关键字：字符串 一起 实体 HTML ngOptions 包含      更新时间：2023-11-01

我正在使用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/例如

解决此问题的一种方法是使用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链接-工作演示

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

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

JSFiddle链接-ng-options演示

在其他答案的基础上，您可以使用过滤器来完成此操作，并获得继续使用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选项中应用过滤器。例如：

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

我很惊讶它能起作用，但它在1.3.20中对我起了作用，而且它比其他解决方案更优雅！

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

相关文章：