gpt4 book ai didi

angularjs - 在 Angularjs/Bootstrap 中,为什么我的取消按钮会调用提交事件

转载 作者:行者123 更新时间:2023-12-03 00:24:44 25 4
gpt4 key购买 nike

我有一个 Angular/Bootstrap 表单,其中有一个按钮 type=submit 和一个普通按钮来取消 - 并隐藏表单。当我单击取消时,它会调用取消事件处理程序,然后调用提交处理程序。 ??下面是 Plunker 中的代码:http://plnkr.co/edit/Nsqy4DuVaoI04VObS2Zd?p=preview

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example33-production</title>


<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.14/angular.min.js"></script>



</head>
<body ng-app="submitExample">
<script>
angular.module('submitExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.list = [];
$scope.text = 'hello';
$scope.cancel = function(){
alert('cancelling');
}
$scope.submitNewAccountForm = function(isValid){
alert('in submit');
}
}]);
</script>
<form ng-controller="ExampleController" name="newAccountForm" ng-submit="submitNewAccountForm(newAccountForm.$valid)" class="form-horizontal" novalidate>
<fieldset>
<!-- Form Name -->
<legend>Account</legend>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="name">Account name</label>
<div class="controls">
<input ng-model="name" id="name" name="name" type="text" placeholder="account" class="input-medium" required="">
<p class="help-block">Required.</p>
</div>
</div>
<!-- Select Basic -->
<div class="control-group">
<label class="control-label" for="type">Account type</label>
<div class="controls">
<select ng-model="type" id="type" name="type" class="input-medium">
<option>client</option>
<option>provider</option>
</select>
</div>
</div>
<!-- Button (Double) -->
<div class="control-group">
<label class="control-label" for="cancelaccountadd"></label>
<div class="controls">
<button type="submit" id="doaccountadd" name="doaccountadd" class="btn btn-success">Save</button>
<button ng-click="cancel()" id="cancelaccountadd" name="cancelaccountadd" class="btn btn-danger">Cancel</button>
</div>
</div>

</fieldset>
</form>
</body>
</html>

最佳答案

button 元素上,submit 是默认的 type 属性。将其更改为 type="button",它将不再调用 submit 事件。

Plunker

关于angularjs - 在 Angularjs/Bootstrap 中,为什么我的取消按钮会调用提交事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24684073/

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