How to respond to clicks on a checkbox in an AngularJS directive

Question

I have an AngularJS directive that renders a collection of entities in the following template    lt table class  table  gt     lt thead gt       lt tr gt         lt th gt  lt input type  checkbox  ng-click  selectAll    gt  lt  th gt         lt th gt Title lt  th gt       lt  tr gt     lt  thead gt     lt tbody gt       lt tr ng-repeat  e in entities  gt         lt td gt  lt input type  checkbox  name  selected  ng-click  updateSelection  event  e id   gt  lt  td gt         lt td gt   e title   lt  td gt       lt  tr gt     lt  tbody gt   lt  table gt    As you can see  it s a  lt table gt  where each row can be selected individually with its own checkbox  or all rows can be selected at once with a master checkbox located in the  lt thead gt   Pretty classic UI   What is the best way to    Select a single row  i e  when the checkbox is checked  add the id of the selected entity to an internal array  and add a CSS class to the  lt tr gt  containing the entity to reflect its selected state   Select all rows at once   i e  do the previously described actions for all rows in the  lt table gt     My current implementation is to add a custom controller to my directive   controller  function  scope            Array of currently selected IDs      var selected    scope selected               Update the selection when a checkbox is clicked       scope updateSelection   function  event  id             var checkbox    event target          var action    checkbox checked    add     remove            if  action     add   amp  selected indexOf id     -1  selected push id           if  action     remove   amp  amp  selected indexOf id     -1  selected splice selected indexOf id   1               Highlight selected row  HOW                checkbox  parents  tr   addClass  selected row   checkbox checked                  Check  or uncheck  all checkboxes       scope selectAll   function                Iterate on all checkboxes and call updateSelection   on them              More specifically  I wonder    Does the code above belong in a controller or should it go in a link function  Given that jQuery is not necessarily present  AngularJS doesn t require it   what s the best way to do DOM traversal  Without jQuery  I m having a hard time just selecting the parent  lt tr gt  of a given checkbox  or selecting all checkboxes in the template  Passing  event to updateSelection   doesn t seem very elegant  Isn t there a better way to retrieve the state  checked unchecked  of an element that was just clicked    Thank you

User · Accepted Answer

This is the way I ve been doing this sort of stuff  Angular tends to favor declarative manipulation of the dom rather than a imperative one at least that s the way I ve been playing with it    The markup   lt table class  table  gt     lt thead gt       lt tr gt         lt th gt           lt input type  checkbox             ng-click  selectAll  event             ng-checked  isSelectedAll    gt         lt  th gt         lt th gt Title lt  th gt       lt  tr gt     lt  thead gt     lt tbody gt       lt tr ng-repeat  e in entities  ng-class  getSelectedClass e   gt         lt td gt           lt input type  checkbox  name  selected            ng-checked  isSelected e id             ng-click  updateSelection  event  e id   gt         lt  td gt         lt td gt   e title   lt  td gt       lt  tr gt     lt  tbody gt   lt  table gt    And in the controller  var updateSelected   function action  id      if  action      add   amp  amp   scope selected indexOf id      -1         scope selected push id         if  action      remove   amp  amp   scope selected indexOf id      -1         scope selected splice  scope selected indexOf id   1            scope updateSelection   function  event  id      var checkbox    event target    var action    checkbox checked    add     remove      updateSelected action  id        scope selectAll   function  event      var checkbox    event target    var action    checkbox checked    add     remove      for   var i   0  i  lt   scope entities length  i          var entity    scope entities i       updateSelected action  entity id            scope getSelectedClass   function entity      return  scope isSelected entity id     selected             scope isSelected   function id      return  scope selected indexOf id   gt   0        something extra I couldn t resist adding     scope isSelectedAll   function       return  scope selected length      scope entities length       EDIT  getSelectedClass   expects the entire entity but it was being called with the id of the entity only  which is now corrected

User · Answer

I prefer to use the ngModel and ngChange directives when dealing with checkboxes  ngModel allows you to bind the checked unchecked state of the checkbox to a property on the entity    lt input type  checkbox  ng-model  entity isChecked  gt    Whenever the user checks or unchecks the checkbox the entity isChecked value will change too   If this is all you need then you don t even need the ngClick or ngChange directives  Since you have the  Check All  checkbox  you obviously need to do more than just set the value of the property when someone checks a checkbox    When using ngModel with a checkbox  it s best to use ngChange rather than ngClick for handling checked and unchecked events  ngChange is made for just this kind of scenario  It makes use of the ngModelController for data-binding  it adds a listener to the ngModelController s  viewChangeListeners array  The  listeners in this array get called after the model value has been set  avoiding this problem     lt input type  checkbox  ng-model  entity isChecked  ng-change  selectEntity    gt        and in the controller      var model        scope model   model      This property is bound to the checkbox in the table header model allItemsSelected   false      Fired when an entity in the table is checked  scope selectEntity   function             If any entity is not checked  then uncheck the  allItemsSelected  checkbox     for  var i   0  i  lt  model entities length  i              if   model entities i  isChecked                model allItemsSelected   false              return                              otherwise ensure that the  allItemsSelected  checkbox is checked     model allItemsSelected   true       Similarly  the  Check All  checkbox in the header    lt th gt       lt input type  checkbox  ng-model  model allItemsSelected  ng-change  selectAll    gt   lt  th gt        and         Fired when the checkbox in the table header is checked  scope selectAll   function             Loop through all the entities and set their isChecked property     for  var i   0  i  lt  model entities length  i              model entities i  isChecked   model allItemsSelected             CSS     What is the best way to    add a CSS class to the  lt tr gt  containing the entity to reflect its selected state    If you use the ngModel approach for the data-binding  all you need to do is add the ngClass directive to the  lt tr gt  element to dynamically add or remove the class whenever the entity property changes    lt tr ng-repeat  entity in model entities  ng-class   selected  entity isChecked   gt    See the full Plunker here

User · Answer

Liviu s answer was extremely helpful for me  Hope this is not bad form but i made a fiddle that may help someone else out in the future   Two important pieces that are needed are        scope entities           title    foo        id   1           title    bar        id   2           title    baz        id   3      scope selected

[javascript] How to respond to clicks on a checkbox in an AngularJS directive?

Examples related to javascript

Examples related to angularjs