无法使用onchange事件处理程序执行函数

Question

我需要跟踪选项元素的颜色变化，如果有的话，我需要更改选择元素的颜色。例如，我标记了#D4D4D4颜色的非活动环境。如果非活动环境设置，我需要select元素自动更改它的颜色。怎么做？

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：

如您所见，两个红色箭头表示相同元素的颜色不匹配。

UPDATE3：

所以我想说的是：我想要完成的任务：第一个箭头指向的元素的颜色应该总是与第二个箭头指向的元素的颜色相匹配。

Answer 1

问题是您是否正在尝试将视图用作模型（如果元素看起来像这样，那么更改它）。糟糕的方法 - 您的观点应始终只是您模型的反映。如果环境处于非活动状态，请将该信息放入模型中，并根据该信息设置视图中的所有内容。

您还可以通过js添加内联样式。

以下是我的建议：

1. 弄清楚你处理的状态（非活跃，活跃等）。
2. 确定样式应如何反映状态中的更改，并创建基于类的CSS以设置这些样式（#environment.inactive {}，#environment.active{}等。）
3. 在您的作用域（或控制器实例）上创建指示状态的值，并通过指令（ng-click等）从视图中以声明方式更改这些值。
4. 使用ng-class根据模型中反映的状态设置视图样式。

Answer 2

您可以考虑使用ng-class指令在元素上动态设置类而不是jQuery https://docs.angularjs.org/api/ng/directive/ngClass

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

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