11

I have select element which should list available currencies. Default currency should have prefix "Default" before its name. For some reason, that prefix is showing for all currencies in the list.

Test HTML:

<div ng-app="testApp">
  <div ng-controller="MainCtrl">
     <select>
        <option ng-repeat="rate in rates track by $index">
            <span ng-if="rate.is_default">Default</span>
            <span>{{rate.name}}</span>
        </option>
     </select>
  </div>
</div>

TEST JS:

var app = angular.module("testApp", []);

app.controller("MainCtrl", function($scope){

$scope.rates = [
    { 'name': 'dolar', 'is_default': true},
    { 'name': 'pound', 'is_default': false},
    { 'name': 'euro', 'is_default': false}
];

});

jsFiddle

NenadPavlov
  • 217
  • 1
  • 2
  • 10
  • [Can I use HTML tags in the options for select elements?](http://stackoverflow.com/questions/11237807/can-i-use-html-tags-in-the-options-for-select-elements) Your problem has nothing to do with angularjs. ` – Satpal May 20 '14 at 09:29
  • 1
    Oh, that makes sense then... Thanks for heads up. :/ – NenadPavlov May 20 '14 at 09:30

1 Answers1

18

You can't use HTML tags in an option tag but you can do something like this:

<option ng-repeat="rate in rates track by $index">
    {{ rate.is_default ? 'default' : '' }} {{rate.name}}
</option>

Fiddle

Dieterg
  • 16,118
  • 3
  • 30
  • 49