Как предотвратить запуск события submit/ng-submit при использовании нескольких кнопок внутри формы

Нажав кнопку "Сделать фото", которая выполняет функцию getPhoto()форма выполняет функцию funcSubmit()ng-submit автоматически. Что нужно изменить, чтобы этого не случилось? Выполняет только функцию getPhoto() без бега ng-submit форма.

Ps.: Этот код является частью мобильного приложения для 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>

Спасибо за все...

5 ответов

Решение

Использовать:

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

Так как <button> автоматически вызывать ng-submit.

Потому что кнопка автоматически вызывает ng-submit.

Я считаю, что это больше касается атрибута типа ваших кнопок, чем сам тег кнопки.

Я полагаю, по умолчанию - submit, и ваш браузер запускает submit, потому что вы пропустили (обязательный?) Атрибут type. Надо попробовать <button type="button"></button> вместе с <button type="submit"></button>,

Это предположения, но каждый раз, когда мне интересно, как Angular работает с HTML, я всегда выбираю семантику, и она просто работает. Этот случай не должен быть исключением.

<button type="button"..>

Сделал трюк для меня.

В угловой форме вы должны иметь только одну кнопку - это вызывает ng-submit.

Если вы хотите иметь несколько элементов, похожих на кнопки, вам нужно стилизовать элементы div или input, чтобы они выглядели как кнопки.

Например:

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

Это в одном из моих текущих приложений 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 которая заслуживает большего уважения, чем я.

Другие вопросы по тегам