How to prevent $event fo fire twice

Question

I'm creating a table component in AngularJS but i'm having a bug that i can't solve.

The structure of my table is something like:

<table>
  <thead>...</thead>
  <tbody>
    <tr ng-click="selectRow()" ng-repeat="$value in values track by $index" ng-click="selectRow($index,$value)>
       <td><input type="checkbox" ng-model="$value.__checked"  ng-click="selectRow($index,$value)"/></td>
    </tr>
  </tbody>
</table>

When i click on the row, it works fine, but when i click on the checkbox it doesn't work as expected, and fire the event twice. I thought that just using the stopPropagation() on selectRow when it's fired by the checkbox would work, but it doesn't.

The function selectRow can work for multi and single seleciton.

function selectRow(ngRepeatIndex,ngRepeatValue){
    var selectedValues = $scope.$parent.selectedValues;
    cleanValueAndArrays(vm.checkAll,vm.checkAll);
    if($attrs.onClick)vm.onClick({value: ngRepeatValue});
    if(vm.config.selection == 'single'){
      if(ngRepeatValue.__checked){
        ngRepeatValue.__checked = false;
        cleanArrays();
      } else {
        cleanValueAndArrays(vm.selectedIndexes.length > 0)
        pushToArrays(ngRepeatValue,ngRepeatIndex);
        ngRepeatValue.__checked = true;
      }
    } else {
      ngRepeatValue.__checked = vm.selectedIndexes.filter(function(val){return val == ngRepeatIndex}).length < 1;
      if((ngRepeatValue.__checked) || vm.selectedIndexes.length == 0 ){
        pushToArrays(ngRepeatValue,ngRepeatIndex);
        return 0;
      }
      var indexOfValueSelected;
      selectedValues.forEach(function(val,indx){
        if(angular.equals(val,ngRepeatValue)) indexOfValueSelected = indx;
      })
      $scope.$parent.selectedValues.splice(indexOfValueSelected, 1);
      vm.selectedIndexes.splice(vm.selectedIndexes.indexOf(ngRepeatIndex),1);
    }
  }

possible duplicate of [AngularJS ng-click stopPropagation](http://stackoverflow.com/questions/20300866/angularjs-ng-click-stoppropagation) — Rahil Wazir, Aug 27 '15 at 12:55
Why don't you remove the second ng-click ? it is useless, the ng-click on the row will be called if you click on your checkbox — ThibaudL, Aug 27 '15 at 12:55

score 0 · Answer 1 · answered Aug 27 '15 at 12:59

0

Remove the second ng-click, it is useless, the ng-click on the row will be called if you click on your checkbox.

answered Aug 27 '15 at 12:59

ThibaudL

999
9
16

score 0 · Answer 2 · answered Aug 27 '15 at 12:59

Create a directive to stop event propagation.

moduleName.directive('preventDefault', function () {
    return function (scope, element, attrs) {
        $(element).click(function (event) {
            event.preventDefault();
        });
    }
});

You can use it as below:

<table>
  <thead>...</thead>
  <tbody>
    <tr ng-repeat="$value in values track by $index" ng-click="selectRow($index,$value) prevent-default>
       <td><input type="checkbox" ng-model="$value.__checked"/></td>
    </tr>
  </tbody>
</table>

score 0 · Answer 3 · answered Aug 27 '15 at 13:02

try this :

<table>
  <thead>...</thead>
  <tbody>
    <tr ng-click="selectRow()" ng-repeat="$value in values track by $index" ng-click="selectRow($index,$value)>
       <td><input type="checkbox" ng-model="$value.__checked"  ng-click="selectRow($index,$value); $event.stopPropagation();"/></td>
    </tr>
  </tbody>
</table>

How to prevent $event fo fire twice

3 Answers3