如何防止在表单中使用多个按钮时触发 submit/ng-submit 事件

Question

点击执行功能getPhoto()的拍照按钮，表格自动执行funcSubmit()ng-submit的功能。需要改变什么来防止这种情况发生？它只执行功能 getPhoto() 而没有运行 ng-submit 形式。

Ps .: 此代码是使用 ionic 框架

开发的移动应用 android 的一部分

<ion-view title="OS">
    <form ng-submit = "funcSubmit()">
        <ion-content class="has-header"> 
            <ion-list >
                <ion-item >
                    <button name="fota" class="button button-block button-positive" ng-click="getPhoto()">
                        <i class="icon ion-ios7-camera"> Photo</i>                      
                    </button>
                </ion-item >
            </ion-list >
        </ion-content>
        <div class="bar bar-footer bar-stable">
            <button name="canc" class="button button-light" ui-sref="app.padronis">Cancel</button>
            <button name="subm" class="button button-light" type="submit">Save</button>     
        </div>
    </form>      
</ion-view>

感谢大家...

Answer 1

使用：

<input type="button" name="fota"  ng-click="getPhoto()">

因为<button>自动调用ng-submit。

Answer 2

在 angular 表单中，您应该只有一个按钮 - 这称为 ng-submit。

如果您想拥有多个类似按钮的元素，您需要将 div 或输入设置为看起来像按钮的样式。

例如：

<div class="button button-block button-positive" ng-click="getPhoto()">
    <i class="icon ion-ios7-camera"> Photo</i>                      
</div>

Answer 3

Because button automatically call ng-submit.

我认为这更多是关于按钮的 type 属性，而不是按钮 tag 本身。

我想默认是 submit 并且您的浏览器正在触发提交，因为您省略了（必需的？）type 属性。应该尝试 <button type="button"></button> 和 <button type="submit"></button>。

这些都是假设，但每次我想知道 Angular 如何处理 HTML 时，我总是选择语义，它只是有效。这种情况应该不会例外。

Answer 4

这是我当前的一个 Ionic 应用程序：

    <form name="myForm">
        <div class="item">
            <button class="button button-block button-positive icon-left ion-ios7-camera" ng-click="takePicture()">Camera</button>
        </div>
        <div class="item">
            <button class="button button-block button-positive icon-right ion-chevron-right" ng-click="update(obj)">Upload</button>

        </div>
    </form>

有两个javascript函数，一个用来拍照，另一个用：

ft.upload($scope.mypicture, encodeURI(Urlforupload), uploadSuccess, uploadError, options);

上传图片和一些表单域。大部分作品借自：https://github.com/yafraorg/ionictests 谁比我更值得称赞。

Answer 5

<button type="button"..>

对我有用。

如何防止在表单中使用多个按钮时触发 submit/ng-submit 事件

How to prevent submit/ng-submit event from triggering when using multiple buttons inside a form

javascript

jquery

android

angularjs

ionic