Как предотвратить $ event for fire дважды

Question

Как предотвратить $ event for fire дважды

0

Я создаю компонент таблицы в AngularJS, но у меня есть ошибка, которую я не могу решить.

Структура моей таблицы выглядит примерно так:

<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>

Когда я нажимаю на строку, она работает нормально, но когда я нажимаю на этот флажок, она работает не так, как ожидалось, и дважды запускайте это событие. Я думал, что просто использование stopPropagation() на selectRow когда он запускает флажок, будет работать, но это не так.

Функция selectRow может работать для нескольких и одиночных селектонов.

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);
    }
  }

Igor Santana 27 авг. 2015, в 15:17

Источник

0

возможный дубликат AngularJS ng-click stopPropagation
Rahil Wazir 27 авг. 2015, в 12:55
1

Почему бы вам не удалить второй нг-щелчок? это бесполезно, нг-щелчок по строке будет вызван, если вы нажмете на свой флажок
ThibaudL 27 авг. 2015, в 12:55

Теги:

javascript

angularjs

3 ответа

Ещё вопросы

возможный дубликат AngularJS ng-click stopPropagation
Почему бы вам не удалить второй нг-щелчок? это бесполезно, нг-щелчок по строке будет вызван, если вы нажмете на свой флажок

Bhushan Firake · Answer 1 · 2015-08-27T10-48-00.000Z

Создайте директиву, чтобы остановить распространение событий.

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

Вы можете использовать его, как показано ниже:

<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>

ThibaudL · Answer 2 · 2015-08-27T10-23-00.000Z

Удалите второй ng-click, это бесполезно, ng-click в строке будет вызываться, если вы нажмете на свой флажок.

Juned Lanja · Answer 3 · 2015-08-27T10-18-00.000Z

попробуй это:

<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>