如何使用 ng-option 在 Angular select 中添加 HTML 个实体

Question

我的问题在某种程度上与 this answer 有关，尽管略有不同。

我想要实现的是从传递给 select 和 ng-options 的字符串中解析 HTML 个实体。所以给出这些数据：

$scope.myOptions = [{
   text: '10.00 &euro;',
   val: 10
},{
   text: '25.00 &euro;',
   val: 25
},{
   text: '50.00 &euro;',
   val: 50
}];

还有这个模板：

<select class="form-control" ng-model="desiredAmount" 
        ng-options="opt.val as opt.text for opt in myOptions">
</select>

我希望 € 实体显示为 €，而这里并没有发生（我能理解为什么，因为 Angular 正确地将我的数据解释为一个简单的字符串）。有可能解决这个问题吗？

这是我为解决问题而制作的 jsbin。

PS - 我知道我可以使用

实现它

<option ng-repeat="opt in myOptions">{{opt.text}} &euro;</option>

但是第一个空选项的出现又带来了另一个问题，这就是为什么我想坚持使用 ng-option 方法，无论如何我想知道它是否可能在使用 ng-option.

时获取解析的字符串

Answer 1

使用 $sce 格式化欧元符号。

在HTML中：

  <select>
      <option ng-repeat="opt in myOptions" ng-bind-html="htmlAdText(opt.text)">{{opt.text}}</option>
  </select>

在 JS 中：

  $scope.desiredAmount = $scope.myOptions[0].text;

  $scope.htmlAdText = function(text){
    return $sce.trustAsHtml(text);
  }

不要忘记将 $sce 注入您的控制器。

Answer 2

关于欧元问题，你也可以使用过滤器来显示值。此过滤器是货币，并以这种格式放置所有值：$0.00。此外，您还可以更改货币符号。

你可以这样做:

{{opt.val | currency:"€"}}

您可以在此处找到更多信息：

http://docs.angularjs.org/api/ng.filter:currency

How to add HTML entities in Angular select with ng-option