AngularJS - 如何在不提交表单的情况下使用 ng-click? [英] AngularJS - how to use ng-click without submitting the form?

问题描述

我有一个包含 ng-click 和 ng-submit 的表单.

ng-submit 用于提交，而 ng-click 调用一个单独的函数，如上传等.

如何确保 ng-click 不会意外提交表单?

谢谢！

解决方案

ngClick 不提交表单.

有时，您可能会遇到问题，因为您的 form 中有两个 button 元素，并且它们都提交了它.为避免这种情况，请在其上指定 "button" 类型.示例:

函数演示($scope){$scope.doSubmit = 函数 () {alert('我提交');};$scope.doClick = 函数 () {alert('我点击');};}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><div ng-app ng-controller="demo"><form ng-submit="doSubmit()"><button type="button" ng-click="doClick()">click</button><button type="submit">submit</button></表单>

I have a form that has both ng-click and ng-submit.

ng-submit is meant for the submission, while ng-click calls a separate function like upload, etc.

How do I make sure that ng-click does not accidentally submits the form?

thank you!

解决方案

ngClick does not submit the form.

Sometimes, you can have problems because you have two button elements in your form, and they both submit it. To avoid that, specify the type "button" on it. Example :

function demo ($scope) {
  
  $scope.doSubmit = function () {
    alert('I submit');
  };
  
  $scope.doClick = function () {
    alert('I click');
  };
  
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app ng-controller="demo">
  
  <form ng-submit="doSubmit()">
    <button type="button" ng-click="doClick()">click</button>
    <button type="submit">submit</button>
  </form>
  
</div>

这篇关于AngularJS - 如何在不提交表单的情况下使用 ng-click?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！