时间戳

首页 > 解决方案 > 仅第一次选择不添加 CSS 的下拉菜单

javascript - 仅第一次选择不添加 CSS 的下拉菜单

问题描述

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

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

AngularJS v1.2.22
引导 v3.1.1
jQuery v1.5

场景：我有 2 个选择下拉列表，其中使用 angular (working)从数据库中检索值，在 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;
            }
        });

    };
});

谁能告诉我为什么以及如何工作？什么是最好的做法，显然上面看起来像一个黑客，它不应该正常工作？

标签： javascriptjqueryhtmlcssangularjs

解决方案

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

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

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

推荐阅读