指令确认对话框点击提交按钮

我有一个表单来创建employee.when我点击提交按钮我需要确认与确认对话框，你想提交表单？在angularjs和引导设计指令确认对话框点击提交按钮

<form ng-submit="create()"> 
<input type="text" ng-model="fstname"> 
<input type="text" ng-model="lstname"> 
<input type="submit" value="submit"> 
</form>

当我点击，如果表单是有效的提交按钮的话，我想确认，以确认box.if我点击ok意味着我要提交表单否则不应提交

来源

2017-09-19 user7098427

终于，我发现我的回答这个question.my视图页面代码看起来像下面

<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" class="modal-demo"> 
    <br> 
<form name="form" novalidate> 
    <input type="text" style="width:200px" class="form-control" name="name" ng-model="text.name" required> 
    <span ng-show="form.$submitted && form.name.$error.required">name is required</span><br> 
    <input type="text" style="width:200px" class="form-control" name="name1" ng-model="text.name1" required> 
    <span ng-show="form.$submitted && form.name1.$error.required">name1 is required</span><br> 
    <input type="submit" ng-click="open(form)"> 
</form><br> 
    <p ng-hide="!msg" class="alert" ng-class="{'alert-success':suc, 'alert-danger':!suc}">{{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>{{name }}</b> is going to submit? 
     </div> 
     <div class="modal-footer"> 
      <button class="btn btn-primary" type="button" ng-click="ok()">Submit</button> 
      <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button> 
     </div> 
    </script> 
<script>

和我的控制器代码看起来如下

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

    $scope.open = function (form) { 
     if(form.$valid) 
     { 
    var modalInstance = $uibModal.open({ 
     animation: $scope.animationsEnabled, 
     templateUrl: 'myModalContent.html', 
     controller: 'ModalInstanceCtrl', 
     resolve: { 
     values: function() { 
      return $scope.text; 
     } 
     } 
    }); 

    modalInstance.result.then(function() { 
     console.log($scope.text); 
     $scope.msg = "Submitted"; 
     $scope.suc = true; 
    }, function(error) { 
     $scope.msg = 'Cancelled'; 
     $scope.suc = false; 
    }); 
}else{ 
    alert(''); 
} 
    }; 
}); 


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

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

我这里更新plunkr demo

来源

2017-09-20 10:18:59 user7098427

指令确认对话框点击提交按钮

回答

相关问题