Adding class to element using Angular JS

Question

I know how to add a class on click of a button in 'jQuery'

$('#button1').click(function(){  $('#div1').addClass('alpha'); }); 

I want to achieve same thing by angular js. I have a controller - myController1. Can someone help me do it eazily?

Answer 1

AngularJS has some methods called JQlite so we can use it. see link

Select the element in DOM is

angular.element( document.querySelector( '#div1' ) ); 

add the class like .addClass('alpha');

So finally

var myEl = angular.element( document.querySelector( '#div1' ) ); myEl.addClass('alpha'); 

Answer 2

You can use ng-class to add conditional classes.

HTML

<button id="button1" ng-click="alpha = true" ng-class="{alpha: alpha}">Button</button> 

In your controller (to make sure the class is not shown by default)

$scope.alpha = false; 

Now, when you click the button, the $scope.alpha variable is updated and ng-class will add the 'alpha' class to your button.