CODEWITHSUNDEEP
javascriptcssangularjsscopedirective
user4756836
user4756836

Reputation: 1337

Add class to multiple elements in AngularJs

I am trying to add a class to multiple divs to change it's background color.

HTML:

<div class="span6">
    <div class="heading">Heading 1</div>                     
</div>

I am currently using this:

angular.element(document.querySelector('.heading')).addClass('color-change');

My issue is that... there are multiple div's with this heading but it is changing the color of only the first occurrence of that div. How can I have it so all the divs with that class add that css styling.

Upvotes: 1

Views: 1818

Answers (2)

tdhulster
tdhulster

Reputation: 1621

Use ng-class instead of class and assign a className to your model : 

<h1 ng-class='mainCtrl.selectedTheme'>Title 2</h1>

angular.module('demoApp', [])
  .controller('MainController', MainController)

function MainController() {
  this.selectedTheme = 'blue';
}

https://jsfiddle.net/4tuavhL2/

Upvotes: 1

MPawlak
MPawlak

Reputation: 715

document.querySelector selects the first element that matches the query. querySelectorAll should achieve the result you want.

JSFiddle: https://jsfiddle.net/usw4cozt/

Upvotes: 3

Related Questions