Add class to multiple elements in AngularJs

Question

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.

Hanlet Escaño · Accepted Answer · 2016-08-09 21:46:09Z

3

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

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

edited Aug 9, 2016 at 21:46

Hanlet Escaño

17.4k10 gold badges54 silver badges76 bronze badges

answered Aug 9, 2016 at 21:44

MPawlak

7155 silver badges18 bronze badges

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

2 Comments

tdhulster Over a year ago

Although this is answer is correct, it's not how you would do it in Angular

MPawlak Over a year ago

Agreed, I would rather use ng-class or class={{expression}} but I won't fault anyone for using native JS, especially if they have some reason they don't want that element bound so strongly to the controller (which they may or may not, idk).

tdhulster · Accepted Answer · 2016-08-09 22:08:57Z

1

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/

answered Aug 9, 2016 at 22:08

tdhulster

1,6333 gold badges20 silver badges36 bronze badges

Collectives™ on Stack Overflow

Add class to multiple elements in AngularJs

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related