如何使用 ng-option 在 Angular 中添加 HTML 实体答案

【问题标题】：How to add HTML entities in Angular select with ng-option如何使用 ng-option 在 Angular 中添加 HTML 实体
【发布时间】：2015-05-07 22:54:06
【问题描述】：

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

我想要实现的是从传递给带有ng-options 的select 的字符串中解析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>

我希望 &euro; 实体显示为 €，而这里不会发生这种情况（我可以理解原因，因为 Angular 正确地将我的数据解释为一个简单的字符串）。有办法解决吗？

这是一个jsbin，用来隔离我的问题。

PS - 我知道我可以使用

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

但这会出现第一个空选项出现的另一个问题，这就是为什么我想坚持ng-option 方法，无论如何我想知道是否有可能获得一个字符串使用ng-option时解析。

【问题讨论】：

【解决方案1】：

对于欧元问题，您也可以使用过滤器来显示值。该过滤器是货币，并以这种格式输入所有值：0.00 美元。此外，您还可以更改货币符号。

你可以这样做：

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

您可以在这里找到更多信息：

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

【讨论】：

【解决方案2】：

使用 $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 注入您的控制器。

【讨论】：