Change the color of specific heading in AngularJS

Question

I am trying to change the color of the specific heading in AngularJS. My issue is that there are multiple headings with the same class in it and I would like to change the color of the one that is clicked only. Currently, I have tried:

HTML:

<div class="row">
    <div class="span6">
        <div class="heading">Heading 1</div>                     
    </div>
    <div class="span1">
        <i class="pull-right" expand="check" collapse="close"></i>
    </div>
</div>

JS:

scope.setExpandCollapse = function () {
    if (scope.expand && scope.collapse) {
        if (isOpen) {
            angular.element(document.querySelectorAll('.heading')).removeClass('color-change');
        } else {
            angular.element(document.querySelectorAll('.heading')).addClass('color-change');
        }
    }
};

The issue is that it changes color of all the headings due to querySelectorAll. Is there a way for me to do this without changing my HTML?

You should use an ID for heading var yourelement = angular.element( document.querySelector( '#elementID' ) ); — Girdhari Agrawal
– Girdhari Agrawal, Commented Aug 10, 2016 at 14:01
I believe the return of querySelectorAll is a NodeList which you can loop through... Try a for each or for in on document.querySelectorAll('.heading') — mhatch
– mhatch, Commented Aug 10, 2016 at 14:01
Is there any other way? like in jquery we have (this) to do so — user4756836
– user4756836, Commented Aug 10, 2016 at 14:02
In pseudo: loop though nodelist; if elem isOpen remove class, else... You want to select an individual node, not all of them. — mhatch
– mhatch, Commented Aug 10, 2016 at 14:03
@user4756836 Could you mark the question as answered if it answered your question? — Maciej Gurban
– Maciej Gurban, Commented Aug 22, 2016 at 10:10

Maciej Gurban · Accepted Answer · 2016-08-10 14:47:21Z

There's many ways to solve this. Here's one:

If you trigger the click that toggles the expanded/collapsed view using ngClick directive, you'll have access to the $event of that click action. If you have the event, you can simply reference $event.target (origin of the click) and toggle class directly on it.

In template:

<h1 class="heading" ng-click="$ctrl.toggle($event);">
  Heading
</h1>

In controller:

this.toggle = function($event) {    
  $event.preventDefault(); 
  angular.element($event.target).toggleClass('color-change');
};

Here's a fiddle.

Edit: if you're attaching a click handler on certain elements, it's useful to add $event.preventDefault(); to prevent any default actions that would be attached to such elements (i.e. button submitting a form). Since you probably don't want to remember which elements might do something nasty, it's safest to always have preventDefault() on your events, unless you explicitly want to allow the default action to take place.

Filipe Melo · Accepted Answer · 2016-08-10 14:08:09Z

For this you'll have to create a directive as in AngularJS you are not "allowed" to touch the DOM outside them.

JS

yourAngularApp.directive('changeColor', function(){
    return {
        restrict : "A",
        link: function(scope, element, attributes) {
            elem.bind('click', function() {
                element[0].classList.toggle('color-change');
            });
        }
    };
});

HTML

<div class="row">
    <div class="span6">
        <div class="heading" change-color>Heading 1</div>                     
    </div>
    <div class="span1">
        <i class="pull-right" expand="check" collapse="close"></i>
    </div>
</div>

The previous code is aware of a click on the element where the directive is applied and toggles (adds or removes) the class 'color-change' on click.

Collectives™ on Stack Overflow

Change the color of specific heading in AngularJS

2 Answers 2

Here's a fiddle.

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Here's a fiddle.

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related