Question

我有一个表格来创建一名员工。

当我点击提交按钮时，我需要在确认对话框中确认为“你想提交＆＃39;形成？

在angularjs和bootstrap设计中，如果可能的话。

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

当我点击提交按钮时，如果表单有效，那么我想用确认框确认。如果我点击确定，这意味着我想提交表单，否则它不应该提交。

Answer 1

最后我找到了这个问题的答案。我的查看页面代码如下所示

<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

单击提交按钮时确认对话框的指令

1 个答案: