Question

所以我在这个问题上已经开了很长时间了，而且我很难理解为什么代码表现如此。

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

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

方案：我有两个选择下拉列表，其中使用角度（工作）从数据库中检索值，在UI方面我必须根据第一个下拉列表禁用第二个下拉列表value（selected）也有效（使用scope.watch），但它仅在第一次失败时，即基于默认值设置，它不会禁用它。

实际值：在第一次基于默认值加载时，应禁用第二个下拉列表但不是

的例外：它应该被禁用

这就是困扰我的，我已经使用ng-disabled =＆＃34; dropdown2＆＃34;和角边$ scope.dropdown2 = true;

这会禁用下拉菜单，但CSS无法正常工作。

如果我将上述内容更改为ng-disabled =＆＃34; {{dropdown2}}＆＃34;和角边$ scope.dropdown2 =＆＃39;禁用＆＃39;;

然后下拉列表不会被禁用，但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会这样做吗？

EDITED

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

ANGULAR 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 =＆＃34; {{dropdown2}}＆＃34;将接受el值而不是布尔值，但它是如何工作的？

在进一步调查后，我在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>

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

选择下拉列表不首次添加CSS

2 个答案: