So deaktivieren Sie Doppelklick auf Img-Tag

Ich habe eine löschen img und beim Klicken auf das wird es eine API-Anruf und löschen Sie den Datensatz, aber auf Doppelklick es macht mehrere API-Anrufe. Ich habe versucht, Doppelklick mit ng-dblclick = "return false;" aber keine Verwendung. kann jemand mir helfen Wie Doppelklick auf img-Tag mit angular js deaktivieren?So deaktivieren Sie Doppelklick auf Img-Tag

PS: Ich habe dieser Ansatz gesehen auf div-Tag

Dank arbeitet

Quelle

2017-10-13 krishna teja

den Klick deaktivieren, bis der Datensatz gelöscht wird. –

Was ist mit Dreifachklicks? Fünfmal Klicks? Sie müssen für dieses Bild eine Markierung setzen, um alle außer dem ersten Klick zu ignorieren. – tadman

@NikolajDamLarsen Ich sehe, dass sogar ng-deaktiviert nicht funktioniert. –

Hier ist ein Beispiel dafür, wie Sie mehr api Anrufe vermeiden können. Es sieht vielleicht anders aus als Ihr Code, aber da Sie keinen Code zur Verfügung gestellt haben, ist dies das Beste, was ich tun kann.

In Ihrem Controller haben Sie eine Variable, die Sie beim ersten Klick auf true setzen und auf "false" setzen, wenn Ihr API-Aufruf mit einer Antwort zurückkehrt. Jedes Mal, wenn die Funktion ausgeführt wird, die den API-Aufruf ausführt, prüfen Sie, ob diese Variable wahr ist. Wenn dies der Fall ist, kehren Sie einfach zurück, bevor Sie den API-Aufruf erneut durchführen. Dies ist der Code (Ich bin das Überspringen hier Best Practices, um die Probe minimal zu halten):

angular.module('app').controller('myController', function($http){ 
    var ctrl = this; 
    ctrl.isDeleting = false; 

    ctrl.deleteRecord = function(id){ 
     if(ctrl.isDeleting){ 
      return; 
     } 

     ctrl.isDeleting = true; 
     $http.delete('[your_api_url]/' + id).finally(function(){ 
      ctrl.isDeleting = false; 
     }); 
    }; 
});

Dann würde Ihre html wie folgt aussehen:

<img src="images/delete.png" ng-click="$ctrl.deleteRecord(id)" ng-class="{'img-disabled': $ctrl.isDeleting}" />

und einige CSS für visuelle hinzufügen Rückmeldung an den Benutzer:

.img-disabled { 
    cursor: default; 
    opacity: 0.5; 
}

Das ist es.

Noch einmal, ich habe keine Ahnung, wie Ihr Code aussieht, daher habe ich ein paar Annahmen getroffen, die Sie bei der Anwendung dieser Lösung berücksichtigen müssen.

Quelle

2017-10-13 20:08:47

Ich folgte der gleichen Logik, aber das Problem ist, dass ich Tag verwende, so sehe ich, dass ng-deaktiviert nicht auf Tag funktioniert. –

Das 'ng-disabled' ist nicht der wesentliche Teil meiner Probe. Es dient lediglich der visuellen Rückmeldung an den Benutzer. Auch ohne diesen Code wird Ihre API mit dem obigen Code nicht zweimal aufgerufen. Du könntest mit einem img-Tag ähnlich machen, indem du 'ng-class =" {'img-disabled': $ ctrl.isDeleting} "' verwendest und etwas css hast, damit der IMG deaktiviert aussieht. Ich habe "ng-disabled" aus meinem Beispiel entfernt, um nicht vom Wesentlichen meiner Antwort abzulenken. –

Dank Nikolaj, es funktioniert gut mit diesem Ansatz. –

wäre die einfachste Option:

<img src="Tulips.png" alt="Add" height="25" width="25" ng-disabled="!isEnabled" ng-click="!isEnabled"></img> 

var app = angular.module('main', []). 
controller('DemoCtrl', function($scope, $filter) { 
$scope.isEnabled=true; 
});

Quelle

2017-10-14 07:50:33 KumarSandeepr

So deaktivieren Sie Doppelklick auf Img-Tag

Antwort

Verwandte Themen