CODEWITHSUNDEEP
angularjsdrop-down-menufont-awesome
NewZeroRiot
NewZeroRiot

Reputation: 552

AngularJS Select - Automatically select option

Afternoon all, i've got a select box that i have created in Angular that contains a FontAwesome icon instead of text. You can see here that i've had to use ng-bind-html to get this to display a unicode value, but what now does not work is as the select box is open, it no longer 'auto selects' the current value.

The Select Box

<select ng-model="item.IconCssClass" class="fontawesomeselect">
    <option ng-repeat="i in Icons" value="{{i.icon}}" ng-bind-html="i.unicode|html">    </option>
</select>

My CSS:

.fontawesomeselect {
    font-family: FontAwesome, Lato;
    width: 40px;
}

In the directive (more or less):

scope.Icons = [
        { icon: 'fa-phone', unicode: '&#xf095;' },
        { icon: 'fa-gbp', unicode: '&#xf154;' }];

scope.item = { "IconCssClass": "fa-phone" };

The select option is not automatically selected at all, any ideas if i'm doing something wrong?

Upvotes: 1

Views: 1339

Answers (1)

csbarnes
csbarnes

Reputation: 1893

You are going to want to use the ng-selected directive to load with the correct icon selected.

<option ng-selected="i.icon === item.IconCssClass" ng-repeat="i in Icons" value="{{i.icon}}" ng-bind-html="i.unicode|html"></option>

Upvotes: 1

Related Questions