AngularJS: applying event listener to multiple elements

Question

I need to add / remove certain classes based on a click on any of the multiple elements (element children). These elements can be constructed dynamically on page load so I can't put ng-click on each.

How can I accomplish this correctly and as easily in AngularJS ?

$(".btn-group > .btn").click(function(){
    $(this).addClass("active").siblings().removeClass("active");
});

addClass(), siblings() and removeClass() should work without having jQuery included as far as I know since Angular has its jqLite right?

I am sure I am missing something obvious ... Thanks for any help.

AlexHv · Accepted Answer · 2014-11-01 16:07:16Z

1

More elegantly you could extend the .btn class like this :

.directive('btn', function(){
    return {
      restrict: 'C' // call the directive on DOM elements with the class 'btn'
      link: function( scope, elem, attr ){
        if( elem.parent().hasClass('btn-group'){
          elem.bind( 'click', function(){
            elem.parent().children().removeClass('active');
            elem.addClass('active');
          });
        }
      }
    }
}

Any .btn on your dom will then have the custom behavior if it has been correctly compiled.

answered Nov 1, 2014 at 16:07

AlexHv

1,73415 silver badges24 bronze badges

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

Comments

skewl84 · Accepted Answer · 2014-11-01 15:48:08Z

0

You could use event delegation.

Basically you will need to add an event listner to the parent element of the dynamically created elements and check the source of the event bubble up

document.querySelector('input[type="button"]').addEventListener('click', function() {
  var el = document.createElement('li');
  var id = new Date().getTime().toString();
  el.id = id;
  el.innerHTML = id;
  document.querySelector('.ct').appendChild(el);
});

document.querySelector('body').addEventListener('click', function(event) {
  if (event.target.tagName.toLowerCase() === 'li') {
    alert(event.target.id);
  }
});

please refer to this jsfiddle

answered Nov 1, 2014 at 15:48

skewl84

1842 silver badges9 bronze badges

Collectives™ on Stack Overflow

AngularJS: applying event listener to multiple elements

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related