CODEWITHSUNDEEP
angularjsng-classangularjs-material
Majedur
Majedur

Reputation: 3242

background color does not change with ng-class condition in angularjs

All other css element working fine rather background-color and color.

    <md-button class="md-raised" ng-style="style1"
                       ng-click="style1=style; style2=null;style3=null;style4=null;removable=0;loadPorcessBarcodes();Head.ProcessMode=1" 
                       ng-class="{'selected-btn': Head.ProcessMode == 1}">Auto Nozzle From Stock</md-button>

My css:

.selected-btn {
        padding: 2px;
        font-size: 20px;
        color: #ffffff;
        background-color: #122b01;
    }

Upvotes: 1

Views: 1324

Answers (1)

Pankaj Parkar
Pankaj Parkar

Reputation: 136174

It seems as you've been using ng-style, which is already applying background-color and color style. So even though you apply a class over it with the overridden property, the same element would not reflect, because inline CSS takes first preference. If you wanted to enforce background-color and color properties to be enforced then mark them as !important to see the expected behavior.

Other better way to solve this problem would moving style1 to new class and apply it using ng-class with its appropriate expression.

Upvotes: 1

Related Questions