Question

我是AngularJS的新手。我有几个选项的下拉列表。当所选选项符合条件时，我想更改下拉菜单文本的文本颜色。我尝试了以下方法。

                    <select class="primary-select form-control"
                        id="rbDefinition" name="rbDefinition"
                        qa-name="rbDefinition"
                        [(ngModel)]="selectedBdef"
                        [ngStyle]="{'color': selectedBdef.disabled ? '#888' : '#555'}"
                     >                            
                    <option *ngFor="let rdef of rbDefinitions"
                            [disabled]="rdef.disabled"
                            [ngValue]="rdef">{{rdef.title}}
                    </option>
                </select>

生成的HTML是

   <select class="primary-select form-control ng-pristine ng-valid ng-touched" id="rbCaregory" ng-reflect-ng-style="[object Object]" ng-reflect-name="Category" ng-reflect-model="[object Object]" ng-reflect-qa-name="Category" style="color: rgb(136, 136, 136);">
          <option value="0: Object" ng-reflect-ng-value="[object Object]" ng-reflect-disabled="true" disabled="">Select Category</option> 
          <option value="1: Object" ng-reflect-ng-value="[object Object]">Design</option> 
           <option value="2: Object" ng-reflect-ng-value="[object Object]">Functional</option>
     </select>

由于将样式应用于所有选项，因此文本颜色为＃888。但是我只希望禁用attr的选项显示为＃888颜色。

也尝试过

    <option *ngFor="let rdef of rbDefinitions"
             [disabled]="rdef.disabled"
             [ngValue]="rdef"
             [ngStyle]="{'color': rdef.disabled.disabled ? '#888' : '#555'}"
     </option>

但是，由于应用了中的样式，而忽略了option中给出的颜色样式。

Answer 1

要实现它，您可以使用angular指令

var app = angular.module('myapp', []);

app.directive("checkAvailability",function(){
    return {
      restrict: 'A',
        link: function(scope, element, attrs) {
          var isActive = (attrs.active == "true");
           if(isActive){
             element.css('color', '#555');
             element[0].disabled = false;
             
           }else{
            element.css('color', '#888');
            element[0].disabled = true;
           }
        }
    }  
});

app.controller('MainCtrl', function($scope) {
  $scope.items = [{name: 'one', id: 30, active : true },{ name: 'two', id: 27, active : true },{ name: 'threex', id: 50 , active : false}];
  
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp" ng-controller="MainCtrl">
    <select ng-model="selectedItem">
      <option ng-repeat="item in items track by $index"  data-active="{{item.active}}" check-availability>
        {{item.name}}
      </option>
    </select>
    
  </div>

检查上面的代码

仅供参考：为选项添加样式属性可能不适用于IOS / Mac设备。

谢谢

Answer 2

您是否有不想在CSS中执行此操作的原因？

因为，因为您用'[disabled] =“ rdef.disabled”标识了禁用元素，所以我认为这是指您的ng模型，其中每个选项都有“ disabled：ture / false”（具有javascript也会有所帮助）

您实际上只需要将其添加到CSS中：

option, select {
    color: #555;
}
option:disabled {
    color: #888;
}

angular.module('myApp', [])

  .controller('myAppCtrl', function($scope) {
    $scope.options = [{
        title: "option #1",
        disabled: false
      },
      {
        title: "option #2",
        disabled: false
      },
      {
        title: "option #3",
        disabled: true
      },
    ]
  });

option,
select {
  color: #555;
}

option:disabled {
  color: #888;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="myApp" ng-controller="myAppCtrl as ctrl">
  <select class="primary-select form-control" id="Options" name="Options" n-model="options">
    <option ng-repeat="item in options" ng-disabled="item.disabled" ng-value="item">
      {{item.title}}
    </option>
  </select>
</body>

根据选定的Option AngularJs将类添加到下拉列表

2 个答案: