AngularJS 弹出表单

Question

I have a button named "add realm", when I click the button, a pop up form should open and submit the request through POST, after I click submit.我有一个名为“添加领域”的按钮，当我单击该按钮时，单击提交后，应打开一个弹出表单并通过 POST 提交请求。

How to do the pop up thing in AngularJS?如何在 AngularJS 中做弹出的事情？

Answer 1

You can refer below example,你可以参考下面的例子，

index.html

  <body ng-app="plunker">
    <div ng-controller="ModalCtrl">
      <button class="btn btn-info" ng-click="open()" style="margin: 15px;">Open Modal</button>

      <h2 style="color: red;">{{result}}</h2>
    </div>
  </body>

script.js

app.controller('ModalCtrl', function($scope, $uibModal) {

  $scope.open = function() {
    var modalInstance =  $uibModal.open({
      templateUrl: "modalContent.html",
      controller: "ModalContentCtrl",
      size: '',
    });

    modalInstance.result.then(function(response){
        $scope.result = `${response} button hitted`;
    });

  };
})

app.controller('ModalContentCtrl', function($scope, $uibModalInstance) {

  $scope.ok = function(){
    $uibModalInstance.close("Ok");
        $http.post('/ServerRequest/PostDataResponse', data, config)
        .success(function (data, status, headers, config) {
            $scope.PostDataResponse = data;
        })
        .error(function (data, status, header, config) {
            $scope.ResponseDetails = "Data: " + data +
                "<hr />status: " + status +
                "<hr />headers: " + header +
                "<hr />config: " + config;
        });
  }

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

});

modalContent.html

<div class="modal-header">
  <h3>Modal header</h3>
</div>
<div class="modal-body">
 <h4>Just something random here</h4>
</div>
<div class="modal-footer">
    <button class="btn btn-primary" ng-click="ok()">OK</button>
    <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>

AngularJS 弹出表单

问题描述

1 个解决方案

解决方案1
0 2020-01-06 10:17:01

AngularJS 弹出表单

问题描述

1 个解决方案

解决方案1 0 2020-01-06 10:17:01

解决方案1
0 2020-01-06 10:17:01