gpt4 book ai didi

AngularJS 和 Bootstrap 模态表单。为什么在取消时提交数据

转载 作者:行者123 更新时间:2023-12-04 16:11:04 25 4
gpt4 key购买 nike

我在模态表单中遇到 AngularJS 和 Bootstrap UI 的问题,取消表单会触发提交。这是我的 Plunker来证明我的问题。取消时,我会在提交内收到一个不应该发生的警报。这个片段有什么问题?

标记

     <div ng-controller="modalForm">
<script type="text/ng-template" id="myModalContent.html">

<div id="messages" class="well" ng-show="message">{{ message }}</div>
<form name="addDomainForm" novalidate ng-submit="submit(addDomainForm)">
<div class="modal-header">
<h6 class="modal-title"><i class="fa fa-plus"></i> add new Item </h6>
</div>

<div class="modal-body">

<div class="form-group">
<input type="domain" ng-model="formData.domain" class="form-control" id="domainAddress" placeholder="Domain Adresse">
</div>

<textarea rows="10" ng-model="formData.description" class="form-control" placeholder="Beschreiben Sie Ihre Aktivität" ng-minlength="15"></textarea>

</div>

<div class="modal-footer">
<input type="submit" class="btn btn-primary" value="Save" />
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</form>


</script>

<button class="btn btn-success" ng-click="open()"><i class="glyphicon glyphicon glyphicon-plus-sign icon-plus-sign"></i> new Item </button>

</div>

Angular

angular.module("testModal", ['ui.bootstrap'])
.controller("modalForm", function($scope, $modal) {
$scope.addDomainForm = {};

$scope.open = function (size) {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl,
size: size
});

};

});

var ModalInstanceCtrl = function ($scope, $modalInstance,$log) {

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

$scope.submit = function(addDomainForm) {
alert();
};

};

最佳答案

添加类型属性; type="button" 按钮对我有用:

例子;

 <button type="button" class="btn btn-warning" ng-click="authModel.cancel()">Cancel</button>`

关于AngularJS 和 Bootstrap 模态表单。为什么在取消时提交数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27135944/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com