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

标签 angularjs twitter-bootstrap

我有一个 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/

相关文章:

javascript - Angular 返回 $$state 对象 - Angular 和 Kinvey

javascript - AngularJS ui-router,滚动到状态更改的下一步

twitter-bootstrap - 重置/更改 Bootstrap 词缀的偏移量

javascript bootstrap-multiselect 在按钮单击时获取所有选定的值

html - 导航栏折叠不起作用

javascript - 带有 ui-router 的嵌套子状态

css - 如何编辑验证ng类错误的css样式

angularjs - 使用 ControllerAs 语法从指令 Controller 访问父属性并且没有 $scope 注入(inject)

javascript - 如何使用 Twitter Bootstrap 主题?

css - Bootstrap 4 : Get full width dropdown of the main-menu container