web-dev-qa-db-ja.com

JSを使用してAngularで削除ボタンの確認アラートを作成します

削除ボタンがあるフォームがあります。削除ボタンをクリックするとポップアップする確認ボックスを作成したいと思います。現在、削除ボタンは機能しています。私は幸運なしにjavascriptでいくつかのことを試しました。私はAngularを使用しています。

これに最適なアプローチですか？

また、誰もこれの例を知っていますか、私はその作品を見つけていません。

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

AngularJSディレクティブは、これに対する解決策としては少し過剰なもののようです。 「confirm（）」関数にいくつかのカスタム機能が必要でない限り、ストレートjavascriptを使用する方が簡単だと思われます。

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

これがお役に立てば幸いです

[〜＃〜] update [〜＃〜]：実際には、AngularではKarma/Jasmineでテストできるため、$ window.confirmを使用した方が良いでしょう。

41
Steven Rogers

ここ の別のアプローチ。基本的には、表示する警告文字列と、ユーザーが受け入れる場合に呼び出す関数を取得するディレクティブです。使用例：

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

これが、「確認ダイアログ」を処理する方法です（ブートストラップを使用）

マークアップ

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

コントローラーのロード時にモデルをfalseに設定して、デフォルトでng-showで非表示にします

$scope.displayLocationDeletePopup = false;

ポップアップを表示するイベントをクリックすると、関数を呼び出します/モデルを渡します

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

コントローラー内：

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

そして、上記のHTMLのアンカーごとに、ポップアップを閉じるか、関数を実行できます

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