Question

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

Ps .:此代码是使用离子框架

开发的app android mobile的一部分

ng-submit

感谢所有人......

Answer 1

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

我认为这更多是关于按钮的类型属性，而不是按钮标记本身。

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

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

Answer 2

使用：

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

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

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

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

5 个答案: