How can i use ng-class variable from controller?

Question

I have set ng-class on the div i want to apply css when file is selected so below onSelect i want to change div color to green. How can i achieve this task using AngularJs ?

html

<div class="text-arrow" ng-class="{activeBackground:applyActive}">File Selection<span class="arrow-div"></span></div>

css

.activeBackground{
       background-color: green;
    }

script.js

$scope.onSelect = function (e) {
        $scope.applyActive = true;
}

there is a typo her ng-class="{activeBackground:applyActive}" it should be ng-class="{'activeBackground':applyActive}" — AlainIb
– AlainIb, Commented Jan 6, 2016 at 15:32
@AlainIb no..' single qoute will be used only when class name will have special character..it will work without ' too — Pankaj Parkar
– Pankaj Parkar, Commented Jan 6, 2016 at 15:33
I want to make variable true onSelect but with above answer it looks like it will be true all the scenarios also if i want to add more classes lets say completeBackground and set different color to it how can i do that — aftab
– aftab, Commented Jan 6, 2016 at 15:37
If i dont need single quote then whats the problem with my code — aftab
– aftab, Commented Jan 6, 2016 at 15:39

boyomarinov · Accepted Answer · 2016-01-06 15:51:08Z

1

Here's a working plnker of what you're trying to achieve.

 <div ng-class="{ activeBackground: applyActive }">File Selection</div>
 <button ng-click="toggleBackground()">Toggle background</button>

Possible issues with your code:

you have another style that overwrites the background
the onSelect function you mentioned is not invoked properly

answered Jan 6, 2016 at 15:51

boyomarinov

6154 silver badges12 bronze badges

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

Collectives™ on Stack Overflow

How can i use ng-class variable from controller?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related