Невозможно выполнить функцию с помощью обработчика событий onchange

Question

Мне нужно отслеживать изменение цвета элемента option, и если возникает ситуация, мне нужно изменить цвет элемента select. Например, я отмечаю неактивные среды с цветом #D4D4D4. Мне нужен элемент выбора, который автоматически меняет цвет, если неактивная среда установлена. Как это сделать?

PS. Если цвет, примененный к элементу выбора, ТОЛЬКО должен применяться к определенным элементам, а не целому, если он расширяется.

Мои в настоящее время не рабочий раствор:

$scope.sel = document.getElementById("environment"); 
    $scope.changeColor = function(){ 
     $scope.sel.style.color = $scope.sel.options[$scope.sel.selectedIndex].style.color; 
    } 
    $scope.sel.onchange = $scope.changeColor; 

    $("#environment > option").each(function(i, el){ 
     el.onchange = $scope.changeColor(); 
    }); 

    $scope.changeOptionColor = function() { 
     $('.form-control option[value="' + $scope.environment + '"]').attr('style', 'color: #D4D4D4'); 
    } 

Related question

UPDATE2:

Как Вы видите две красные стрелки показывает несоответствие цветов из тот же элемент s.

Update3:

Так в нескольких словах, что я пытаюсь сделать: Цвет элемента указываемого первой стрелки должны всегда соответствовать цвету элемента, на который указывает второй стрелкой.

Answer 1

Проблема заключается в том, что вы пытаетесь использовать свое представление в качестве своей модели (если элемент выглядит так, а затем измените это). Плохой подход - ваш взгляд всегда должен быть только отражением вашей модели. Если среда неактивна, поместите эту информацию в свою модель и пусть все в вашем представлении будет составлено на основе этой части информации.

Вы также добавляете стили inline через js.

Вот что я рекомендую:

1. Выяснить, что говорится, что вы имеете дело с (неактивным, активным, и т.д.).
2. Определите, как стили должны отражать эти изменения в состоянии, и создайте класс css для создания этих стилей (#environment.inactive {}, #environment.active{} и т. Д.).
3. Создайте значения в своей области (или экземпляре контроллера), которые диктуют состояние, и изменяют эти значения декларативно из представления через директивы (ng-click и т. Д.).
4. Используйте ng-класс, чтобы создать свой вид на основе состояния, отраженного в модели.

Answer 2

Вы могли бы рассмотреть вопрос об использовании директивы нг-класса, чтобы динамически устанавливать класс на вашем элементе, а не JQuery https://docs.angularjs.org/api/ng/directive/ngClass

<div id="environment" ng-class="{{changeColor()}}"/> 

$scope.changeColor = function(){ 
    return someColorClass; 
}