在 Select-Option 标签中使用 ng-bind-html 或类似的东西

Question

我在下面有这段代码。这是使用 NgOptions 在表单中绘制一些选项的直接方法。

function NameCtrl($scope) {
  $scope.theOptions = [{
    'label': 'The Opt<sup>&trade;</sup>',
    'id': 3
  }]

}

<html ng-app>

<head>
  <meta charset="utf-8">
  <title>Angular.js Example</title>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"></script>

</head>

<body ng-controller="NameCtrl">
  <select ng-model="selectedOption" ng-options="x.id as x.label for x in theOptions">
        <option value="">Select</option>
      </select>
</body>

</html>

我的问题是：有什么方法可以使选项 The Opt<sup>™</sup> 呈现 The Opt^™ Select 下拉菜单？因为我不能使用 ng-bind-html。有什么办法可以做到这一点？感谢任何帮助。

Answer 1

您可以使用 ng-repeat 并使用 ng-bind-html。请看下面的代码：

<select ng-model="selectedOption">
    <option value="">Select</option>
    <option ng-repeat="x in theOptions" ng-bind-html="x.label" value="{{x.id}}" id="{{x.id}}"></option>
</select>

Answer 2

如果您需要使用 ng-options，这里有一些相关的 and here's a plunker 显示了此解决方案和您的代码。希望这可以帮助。请注意，我还将您的标签更改为 html 实体代码。

在 Select-Option 标签中使用 ng-bind-html 或类似的东西

Using ng-bind-html or something similar in Select-Option tag

html

javascript

angularjs

ngsanitize