使用Angular指令将可切换按钮添加到DOM

Question

See the following Plunker:

https://plnkr.co/edit/gLFw26zoJeaM5qtPjCFg?p=preview

I have an element <sc-chart type="approved"></sc-chart> that hooks into the scChart directive to add a chart to the page (I've omitted that part of the code since that's not pertinent to this issue). After adding the chart I then want to create a group of buttons next to the chart populated with the names array (this array will not be static, it will be the result of a service call, so I can't hardcode the buttons).

I'm able to add the buttons okay and make them clickable. I'm even able to highlight them when they're selected. However, I'm having a hard time figuring out how/when to remove the "active" CSS class, when I've clicked away from the button. It may be something pretty simple I'm missing.

Answer 1

just add removeClass() function:

btn.on('click', {name: i}, function(event) {
  $('.pill-btn').removeClass('active');
  $(this).addClass('active');
  alert(event.data.name);
});

plunker: https://plnkr.co/edit/6Nj4beNuJf1plZmPAs0z?p=preview