Unbind click event of an element after first click and rebind it after action perfomed in angular js

Question

I have a list of items in ng-repeat and each of them has a delete button. The action of delete button is some ajax request. My problem is if a user click multiple times on a delete button my api call will get failed because it is deleted in the first click and passing id is not valid in second click . I want to unbind the click after first click and rebind the same on my ajax request success callback.

Here is what I have tried is

HTML

<li ng-repeat="labels in addedLabels track by $index">
   {{labels.Label.label_name}}
    <button ng-click="removeLabel(labels.label_id, labels.module_id,$index,true,$event);">
    </button>
</li>

IN CONTROLLER

$scope.removeLabel  = function(label_id,module_id,index,popup,event){
    $(event.currentTarget).off('click')
   opts.url    = SERVER_URL + 'path';
   opts.data   = {
                label_id: label_id,
                module_id : module_id
            };
  $http.post(opts.url,opts.data)
    .then(function(response){
      // some action
     },function(err){
      // error action
     }).finally(function(){
      $(event.currentTarget).on('click')
   })

Pankaj Parkar · Accepted Answer · 2017-10-13 21:41:41Z

2

disable Edit button until delete API call respond to either success or failed. Also pass labels object to removeLabel method, so can easily grab properties from the same.

Html

<li ng-repeat="labels in addedLabels track by $index">
   {{labels.Label.label_name}}
    <button ng-disabled="labels.disabled" ng-click="removeLabel(labels,$index,true,$event);">
    </button>
</li>

Code

$scope.removeLabel = function(label, module_id, index, popup, event) {
    opts.url = SERVER_URL + 'path';
    opts.data = {
        label_id: label.label_id,
        module_id: label.module_id
    };
  label.disabled = true; //disabling button 
    $http.post(opts.url, opts.data)
      .then(function(response) {
      // some action
    }, function(err) {
      // error action
    }).finally(function() {
      label.disabled = false; //enabling it
    })
}

edited Oct 13, 2017 at 21:41

answered Oct 13, 2017 at 21:36

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

3 Comments

Jennifer Over a year ago

hello Pankaj, I have tried it. But it deleted the next element also. I have clicked first element 2 times, then first and second element get deleted

Starmetal Over a year ago

@Jennifer something might be wrong with the code that's handling the removal of that label from the array.

Jennifer Over a year ago

I have edited my question.Code to remove the label from array added. Also when I put my $http request in a $timeout it's working fine. I am not sure what is happened with it

Collectives™ on Stack Overflow

Unbind click event of an element after first click and rebind it after action perfomed in angular js

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related