Дисплей Выбранный вариант Цвет - AngularJS

Мне интересно, можно ли отобразить выбранный цвет опций после выбора пользователем параметра?Дисплей Выбранный вариант Цвет - AngularJS

В этом примере я использую символ флага Unicode из библиотеки Font-Awesome.

Этот код работает в приложении AngularJS, но это то, что можно так же легко обрабатывать с помощью CSS.

<label for="followUp">FollowUp:</label> 
<select id="followUp" class="fa fa-flag" style="font-family:'FontAwesome',Arial;"> 
    <option value=""></option> 
    <option class="fa fa-flag" style="color:blue;" value="1">&#xf024;</option> 
    <option class="fa fa-flag" style="color:violet;" value="2">&#xf024;</option> 
    <option class="fa fa-flag" style="color:yellow;" value="3">&#xf024;</option> 
    <option class="fa fa-flag" style="color:red;" value="4">&#xf024;</option> 
</select>

источник

2015-10-31 Harvey Mushman

Угловые привязки данных могут быть полезны. –

Угловые данные (ng-model) означают, что мне нужно использовать какое-то значение для цветовой перекрестной ссылки, и я полагаю, что оператор switch устанавливает ng-стиль для выбора. Я скачу, что есть способ получить цвет CSS этого параметра, а затем передать его в стиле ng, но до сих пор мне не удалось выяснить, как добраться до объекта option из ng-change. –

Здесь может быть полезен ng-класс. –

Вот как вы можете достичь этого:

В контроллере, вы можете определить переменные возможности для хранения отображения для различных цветов и значений.

$scope.styleOptions = {"1":"blue","2":"violet","3":"yellow","4":"red"};

Изменить HTML как это:

<label for="followUp">FollowUp:</label> 
<select id="followUp" ng-model="selectedValue" 
    ng-class="styleOptions[selectedValue]"> 
    <option value=""></option> 
    <option class="fa fa-flag blue" value="1">One &#xf024;</option> 
    <option class="fa fa-flag violet" value="2">Two &#xf024;</option> 
    <option class="fa fa-flag yellow" value="3">Three &#xf024;</option> 
    <option class="fa fa-flag red" value="4">Four &#xf024;</option> 
</select>

Я добавил один, два .. в настройках только увидеть цвет меняется после выбора.

здесь является plnkr link

источник

2015-11-02 09:52:58

Это решение означает, что мне нужно создать массив, который связывает значение с цветом. Я надеялся, что есть способ прочитать значение цвета выбранного параметра, а затем применить его через ng-стиль или ng-класс. Идея здесь в том, что данные, заполняющие значения параметров, не всегда будут простой 1,2,3 ... но последовательность флагов останется статической. Любые идеи о том, как добраться до выбранного объекта опции, где уже установлен цвет css? –

Как правило, такие значения параметров поступают из задней части, простые или сложные. То есть, они обычно управляются данными. Если это так, то этот подход прост. –

Тест для mac .... –

Дисплей Выбранный вариант Цвет - AngularJS

ответ

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