2015-09-25 1 views
1

Во второй половине дня у меня есть поле выбора, которое я создал в Angular, которое содержит значок FontAwesome вместо текста. Вы можете видеть здесь, что мне нужно было использовать ng-bind-html, чтобы отобразить его значение unicode, но то, что сейчас не работает, - это когда окно выбора открыто, оно больше не «автоматически выбирает» текущий стоимость.AngularJS 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> 

Мой CSS:

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

В директиве (более или менее):

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

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

параметр Выбор не выбирается автоматически на всех, любые идеи, если я делаю что-то неправильно?

+0

Похоже, что 'fa-lock' не существует в вашем массиве' scope.Icons'. Попробуйте добавить его туда или изменить выбранный значок на 'fa-phone' или' fa-gbp'. – csbarnes

+0

OK, мой плохой я выбрал неправильный элемент для демонстрации, изменится сейчас. Элемент определенно существует. – NewZeroRiot

ответ

1

Чтобы загрузить нужный значок, вы должны использовать ng-selected directive.

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

Я знал, что это будет просто! Приветствия попробуют, когда я приду домой :) – NewZeroRiot

+0

Работает ура! – NewZeroRiot

Смежные вопросы