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