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

Question

My question is somehow related to this answer , although slightly different.

What I would like to achieve is to get HTML entities parsed from a string passed to a select with ng-options . So given these data:

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

And this template:

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

I would like the € entity to be displayed as €, while here this does not happen (and I can understand why, as Angular correctly interprets my data as a simple string). Is it possible to solve this?

Here's a jsbin I have made to isolate my problem.

PS - I know that I can achieve it using

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

But this arises another problem with the appearance of a first empty option which is why I'd like to stick to the ng-option method, and in any case I would like to know if it is even possible to get a string parsed when using ng-option .

Answer 1

Use $sce, to format the euro sign.

in HTML:

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

in JS:

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

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

Don't forget to inject $sce into your controller.

http://jsbin.com/tijevebiya/2/edit?html,js,output

Answer 2

As regards as euro problem, you can also use a filter to display the value. This filtre is currency and put all value in this format : $0.00. Moreover you can also change the currency symbol.

You can do it like this :

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

You can find more information here :

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