Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ng-click won't work with div in ionic

Well, as stated by the title, I'm having this problem, say, i have a form with multiple steps that i created using the ng-show property along with a function to set a $scope variable to an identifier in order to hide everything but the steps that the user should be undergoing, all worked fine, but then, i realise the form was being summited on every user click on the buttons to continue tho the next part of the form. in other words this:

<button class="button button-block button-positive" ng-click="selectTab(2)">Continuar</button</label>

inside a form, make some div like this:

<div ng-show="tab === 2"> ... data goes here ... </div>

show up and disappear as the user navigates, but is also submitting the form, but if i change the tag like this :

<label class="item">
                    <div class="button button-block button-positive" ng-click="selectTab(2)">Continuar</div>
                </label>

it just won't work at all, my form its not being submitted on every click, so thats an update on the situation, but its not working either, ¿why is this happening? ¿how can i fix it?.

Thanks in advance and sorry to bother you all.

like image 417
Q_ro Avatar asked Aug 07 '14 20:08

Q_ro


3 Answers

Use on-tap. both on-tap and ng-click fires at same time.

<div on-tap="fireEvent()"></div>
like image 50
Ashes Vats Avatar answered Nov 20 '22 07:11

Ashes Vats


Make sure to declare your button with type="button". If you don't, it automatically assumes it is type submit. Also if you are looking to only show that div when tab === 2, simply assign in ng-click, no need for a function.

In your selectTab(2) function you should be able to assign a property on your scope named tab to whatever you pass into the function, activating ng-show.

$scope.selectTab = function(item) {
    $scope.tab = item;
    //Your other logic for soothe
};

Yes, strange that the standard is 'submit' for a button. I suppose they assume that a buttons ultimate purpose is to perform an action, like submitting. Thanks mate.

like image 42
jcc Avatar answered Nov 20 '22 07:11

jcc


If your button is inside the <label> ng-click will not work.

Change to a <div> or <span>.

like image 43
Eder Ribeiro Avatar answered Nov 20 '22 05:11

Eder Ribeiro