如何防止在表单内使用多个按钮时触发提交/ng-submit 事件答案

【问题标题】：How to prevent submit/ng-submit event from triggering when using multiple buttons inside a form如何防止在表单内使用多个按钮时触发提交/ng-submit 事件
【发布时间】：2015-01-15 01:49:53
【问题描述】：

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

Ps .: 这段代码是应用 android mobile 的一部分，使用 ionic 框架开发

<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>

谢谢大家...

【问题讨论】：

请分享您的控制器代码
您的意思是您的表单在单击“获取照片”按钮时提交？

标签： javascript android jquery angularjs ionic

【解决方案1】：

因为按钮会自动调用ng-submit。

我相信这更多的是关于按钮的 type 属性，而不是按钮标签本身。

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

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

【讨论】：

【解决方案2】：

使用：

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

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

【讨论】：

我正在尝试，但这种方式没有调用“getPhoto()”函数。
我从源中删除标签“表单”并保留所有标签“按钮”，但我在所有按钮中使用 ng-click... 包括按钮提交。现在没关系。它工作正常。

【解决方案3】：

<button type="button"..>

为我做了诀窍。

【讨论】：

【解决方案4】：

在角度形式中，您只需要一个按钮 - 这称为 ng-submit。

如果您想拥有多个类似按钮的元素，则需要设置 div 或 input 的样式，使其看起来像一个按钮。

例如：

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

【讨论】：

出于许多可用性原因，最好使用<button> 标签。在这里查看原因：youtube.com/watch?v=CZGqnp06DnI（只需使用按钮）
谢谢，正是我想要的。

【解决方案5】：

这是我当前的 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，他比我更值得称赞。

【讨论】：