change CSS based on value Angularjs

Question

I want to change label color and cursor type based on 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>

The default class is fee-type but when then button get clicked its class should change to 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;
}

use ng-class instead

Vanojx1
– Vanojx1

2017-08-16 12:42:20 +00:00
Commented Aug 16, 2017 at 12:42 — Vanojx1
– Vanojx1, Commented Aug 16, 2017 at 12:42

Shaishab Roy · Accepted Answer · 2017-08-16 12:44:53Z

2

You should use ng-class instead of ng-style and add condition in ng-class to apply css class in your label.

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>

and controller

$scope.feeType = 'two';

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

answered Aug 16, 2017 at 12:44

Shaishab Roy

16.9k7 gold badges56 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Shaishab Roy Over a year ago

value of feeType should be string so use quotation like 'one' instead of one in your controller

Collectives™ on Stack Overflow

change CSS based on value Angularjs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related