在表單提交前顯示確認彈出式/模式

使用AngularJS，我們如何在提交表單數據之前顯示一個彈出窗口，用於重新檢查並確認在單擊提交按鈕時輸入的輸入值？在表單提交前顯示確認彈出式/模式

2017-05-18 Sakky

我猜你在找什麼，在UI方面，被稱爲「模式」？你可以在這裏找到一些例子https://angular-ui.github.io/bootstrap/搜索模態。 –

嘗試用Uib modal。 https://angular-ui.github.io/bootstrap/#!#modal

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']); 
 
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($uibModal, $log, $document) { 
 
    var $ctrl = this; 
 
    $ctrl.animationsEnabled = true; 
 
    $ctrl.name = "Manikandan"; 
 

 
    $ctrl.open = function (size, parentSelector) { 
 
    var parentElem = parentSelector ? 
 
     angular.element($document[0].querySelector('.modal-demo ' + parentSelector)) : undefined; 
 
    var modalInstance = $uibModal.open({ 
 
     animation: $ctrl.animationsEnabled, 
 
     ariaLabelledBy: 'modal-title', 
 
     ariaDescribedBy: 'modal-body', 
 
     templateUrl: 'myModalContent.html', 
 
     controller: 'ModalInstanceCtrl', 
 
     controllerAs: '$ctrl', 
 
     size: size, 
 
     appendTo: parentElem, 
 
     resolve: { 
 
     values: function() { 
 
      return $ctrl.name; 
 
     } 
 
     } 
 
    }); 
 

 
    modalInstance.result.then(function() { 
 
     $ctrl.msg = "Submitted"; 
 
     $ctrl.suc = true; 
 
    }, function(error) { 
 
     $ctrl.msg = 'Cancelled'; 
 
     $ctrl.suc = false; 
 
    }); 
 
    }; 
 
}); 
 

 

 
angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($uibModalInstance, values) { 
 
var $ctrl = this; 
 
$ctrl.name= values; 
 
    $ctrl.ok = function() { 
 
    $uibModalInstance.close('ok'); 
 
    }; 
 

 
    $ctrl.cancel = function() { 
 
    $uibModalInstance.dismiss('cancel'); 
 
    }; 
 
});

<!doctype html> 
 
<html ng-app="ui.bootstrap.demo"> 
 
    <head> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script> 
 
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script> 
 
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
 
    </head> 
 
    <body> 
 

 
<div ng-controller="ModalDemoCtrl as $ctrl" class="modal-demo"> 
 
    
 
    <br> 
 
<form name="form" novalidate> 
 
    <input type="text" style="width:200px" class="form-control" name="name" ng-model="$ctrl.name" required><br> 
 
    <button type="button" ng-disabled="form.$invalid" class="btn btn-default" ng-click="form.$valid && $ctrl.open()">Save</button> 
 
</form><br> 
 
    <p ng-hide="!$ctrl.msg" class="alert" ng-class="{'alert-success':$ctrl.suc, 'alert-danger':!$ctrl.suc}">{{$ctrl.msg}}</p> 
 
    
 
</div> 
 
<script type="text/ng-template" id="myModalContent.html"> 
 
     <div class="modal-header"> 
 
      <h3 class="modal-title" id="modal-title">Your Details</h3> 
 
     </div> 
 
     <div class="modal-body" id="modal-body"> 
 
      
 
      <p>Are you sure, your name <b>{{$ctrl.name }}</b> is going to submit? 
 
     </div> 
 
     <div class="modal-footer"> 
 
      <button class="btn btn-primary" type="button" ng-click="$ctrl.ok()">Submit</button> 
 
      <button class="btn btn-warning" type="button" ng-click="$ctrl.cancel()">Cancel</button> 
 
     </div> 
 
    </script> 
 
    </body> 
 
</html>

來源

2017-05-18 06:37:11

與JS代碼：

if(confirm("xxx")) 
{ 
     //do next step 
}

來源

2017-05-18 05:57:09

在表單提交前顯示確認彈出式/模式

回答

相關問題