根据值 Angularjs 更改 CSS

Question

我想根据 ng-model 更改标签颜色和光标类型

index.html

<button ng-click="changeType()">Change</button>
<label class="fee-type" ng-style="feeType ==='one' && {'class':'disabled-class'}" for="fixed2">Client Contengency Fee</label>
<label class="fee-type"  ng-style="feeType ==='one' && {'class':'disabled-class'}" for="fixed1">Fixed Fee Per Property</label>

默认的 class 是 fee-type 但是当点击按钮时它的 class 应该变成 disabled-class

index.css

.fee-type {
    float: left;
    clear: none;
    display: block;
    padding: 2px 1em 0 0;
    color: black;
}

.disabled-class {
    color:gray;
    cursor: not-allowed;
}

index.js

$scope.feeType= two;

$scope.changeType= function(){
    $scope.feeType=one;
}

Answer 1

您应该使用 ng-class 而不是 ng-style 并在 ng-class 中添加条件以在您的标签中应用 css class。

HTML:

<button ng-click="changeType()">Change</button>
<label class="fee-type" ng-class="{'disabled-class':feeType ==='one'}" for="fixed2">Client Contengency Fee</label>
<label class="fee-type" ng-class="{'disabled-class':feeType ==='two'}" for="fixed1">Fixed Fee Per Property</label>

和控制器

$scope.feeType = 'two';

$scope.changeType = function() {
   $scope.feeType = 'one';
};

根据值 Angularjs 更改 CSS

change CSS based on value Angularjs

angularjs

ng-style

angularjs-ng-style