web-dev-qa-db-fra.com

Créez une alerte de confirmation pour le bouton Supprimer dans Angular using JS

J'ai un formulaire qui a un bouton de suppression, je voudrais créer une boîte de confirmation qui apparaît lorsque vous cliquez sur le bouton de suppression. Le bouton Supprimer fonctionne actuellement. J'ai essayé plusieurs choses en javascript sans succès. J'utilise Angular.

Est-ce la meilleure approche pour cela?

De plus, quelqu'un connaît-il des exemples de cela, je n'en ai trouvé aucun qui fonctionne.

$(document).ready(function(){
  $("form").validate();
  $(".radius small success button").ConfirmDialog('Are you sure?');
});
javascriptangularjsconfirmation
18
FluxEngine

On dirait qu'une directive AngularJS est un peu exagérée pour une solution à cela. Il semble plus facile d'utiliser simplement du javascript simple, sauf si vous avez besoin de fonctionnalités personnalisées pour votre fonction "confirm ()".

if (confirm('Are you sure you want to delete this?')) {
     // TODO:  Do something here if the answer is "Ok".
}

J'espère que cela aide, bravo

UPDATE : En fait, avec Angular, il serait préférable d'utiliser $ window.confirm car cela vous permettrait de tester avec Karma/Jasmine.

41
Steven Rogers

Ici est une autre approche à ce sujet. Fondamentalement, c'est une directive qui obtient la chaîne d'avertissement que vous souhaitez afficher et la fonction à appeler si l'utilisateur accepte. Exemple d'utilisation:

<button type="button" ng-really-message="Are you sure?"
ng-really-click="delete()">Delete</button>
29
asafge

C'est ainsi que nous gérons nos 'dialogues de confirmation' (en utilisant le bootstrap)

Le balisage

<div class="alert alert-block alert-error notification fade in" data-ng-show="displayLocationDeletePopup">
    <h6>Are you sure you want to delete this location?</h6>
    <div class="form-controls-alert">
        <a href="" class="btn" data-ng-click="showDeleteLocationPopup(false)">No</a>
        <a href="" class="btn btn-danger" data-ng-click="deleteVendorLocation(locationId)">Yes</a>
    </div>
</div><!-- end alert -->

Définir le modèle sur false à la charge du contrôleur pour le masquer par défaut avec ng-show

$scope.displayLocationDeletePopup = false;

En cliquant sur l'événement pour afficher le popup, appelle une fonction/passe le modèle dans

<i class="icon-remove" data-ng-click="showDeleteLocationPopup(true, location)"></i>

Dans le contrôleur:

$scope.showDeleteLocationPopup = function(options, id) {
    if (options === true) {
        $scope.displayLocationDeletePopup = true;
    } else {
        $scope.displayLocationDeletePopup = false;
    }
    $scope.locationId = id;
};

Et selon les ancres dans le html ci-dessus, vous pouvez soit fermer le popup, soit exécuter la fonction

$scope.deleteVendorLocation = function (storeLocation) {
   // Code to run on confirmation            
};
9
Christopher Marshall