将类添加到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.

Answer 1

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

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

Answer 2

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/