根據選定的Option AngularJs將類添加到下拉列表

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

為了實現它，您可以使用角度指令

 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-model的，其中每個選項都有“ 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 個解決方案

解決方案1
0 2018-07-20 06:04:10

解決方案2
0 已采納 2018-07-20 22:03:43

根據選定的Option AngularJs將類添加到下拉列表

問題描述

2 個解決方案

解決方案1 0 2018-07-20 06:04:10

解決方案2 0 已采納 2018-07-20 22:03:43

解決方案1
0 2018-07-20 06:04:10

解決方案2
0 已采納 2018-07-20 22:03:43