私は従業員を作成するフォームを持っています。私は送信ボタンをクリックします。あなたはフォームを提出したいですか確認ダイアログボックスで確認する必要がありますか？ angularjsとブートストラップデザインディレクティブの確認ダイアログの送信ボタンをクリック
<form ng-submit="create()">
<input type="text" ng-model="fstname">
<input type="text" ng-model="lstname">
<input type="submit" value="submit">
</form>
のフォームが有効である場合、私はその後、私は私はそれが
を提出してはならない他のフォームを送信したい[OK手段をクリックして確認box.ifで確認したい送信ボタンをクリックすると最後に、私は
<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>
以下のようなこのquestion.myビューページのコードの一見のための私の答えを見つけて、私のコントローラのコードは
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