选择下拉列表，仅第一次不添加 CSS

Question

所以我在这个问题上苦苦思考了很长一段时间，我很困惑为什么代码会这样。

所以我在我的项目中使用以下内容：

AngularJS v1.2.22
Bootstrap v3.1.1
jQuery v1.5

场景： 我有 2 个选择下拉列表，其中使用角度 （工作） 从数据库中检索值，在 UI 方面，我必须根据第一个下拉列表的值（选定）禁用第二个下拉列表也可以（使用scope.watch)，但它只在第一次失败，即基于设置的默认值，它不会禁用它。

实际： 在基于默认值的第一次加载时，第二个下拉菜单应该被禁用，但它不是

例外： 它应该被禁用

这让我很困惑， 我已经使用 ng-disabled="dropdown2" 和角度边 $scope.dropdown2 = true;

这会禁用下拉菜单，但 CSS 不起作用。

如果我将上面的内容更改为 ng-disabled="{{dropdown2}}" 和角度边 $scope.dropdown2 = 'disabled';

然后下拉菜单不会被禁用，但是 CSS 可以工作。

代码
AngularJS

$scope.$watch('formItem.dropdown1',function(newValue,oldValue){
        if(newValue.cd==='A' || newValue.cd==='B'){
       //$scope.dropdown2= 'disabled';
        $scope.dropdown2= true;
      $document.find("#eldropdown2").next().addClass('disabled');
        $document.find("#eldropdown2").attr('disabled',true);
}

HTML

<div class="col-lg-7" >
    <select class="form-control"  id="eldropdown2" ng-model="formItem.dropdown2" ng-options="c.valueForDisplay for c in dropdown2"  ng-disabled="dropdown2" paCombobox></select>
</div>

谁能帮我弄清楚为什么 AngularJs/Js 会这样做？？

已编辑

我的同事帮我解决了这个问题，我在 JS 中添加了以下行

角度 JS

$scope.dropdown2= true;
$scope.$watch('formItem.dropdown1',function(newValue,oldValue){
        if(newValue.cd==='A' || newValue.cd==='B'){
       $scope.dropdown2= 'disabled';
       // $scope.dropdown2= true;
      $document.find("#eldropdown2").next().addClass('disabled');
        $document.find("#eldropdown2").attr('disabled',true);
}

HTML

<div class="col-lg-7" >
    <select class="form-control"  id="eldropdown2" ng-model="formItem.dropdown2" ng-options="c.valueForDisplay for c in dropdown2"  ng-disabled="{{dropdown2}}" pa-combobox></select>
</div>

在 scope.watch 之上，但它是如何工作的？显然这是一个黑客对吗？我的意思是因为 ng-disabled="{{dropdown2}}" 将接受 el-value 而不是正确的布尔值，但它是如何工作的？？

经过进一步调查，我在 JS 端发现了这段代码

app.directive('paCombobox', function () {
    return function (scope, element, attrs) {
        scope.$watch(attrs.ngModel, function (value) {
        element.selecter('destroy');
            if(scope.disableEle || element.attr('ng-disabled')==='disabled'){
                element.selecter();
                element.selecter('disable');
            }else{
                element.selecter({
                    inputFilter:true
                });
                element.selecter('enable');
            }
        var tabIndex = element[0].tabIndex;
            if(tabIndex != -1){
                element.parent().find('div.selecter')[0].tabIndex = tabIndex;
            }
        });

    };
}); 

谁能告诉我这是为什么以及如何工作的？以及要遵循的最佳做法是什么，显然上述内容似乎是一种黑客行为，它不应该正常工作？？

Answer 1

我有两个初步的想法供你尝试，

在 $scope.$watch 的末尾可以尝试添加 $scope.$apply() 吗？它可以更新 DOM 以通知它所需的 css 更改。

我的另一个想法是使用 ng-class 并查询 dropdown2。

ng-class="dropdown2?'class for dropdown2 == true':'class for dropdown2 == false'"

Answer 2

尝试使用属性disabled，而不是添加类：

<select disabled id="eldropdown2" ng-disabled="dropdown2"></select>

然后用角删除属性而不是类。