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

Question

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

Ps .:此代码是使用离子框架开发的app android mobile的一部分

<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

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

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

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

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

Answer 3

<button type="button"..>

为我做了诀窍。

Answer 4

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

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

例如：

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

Answer 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，他应该得到比我更多的信誉。