CODEWITHSUNDEEP
angularjsionic-framework
Q_ro
Q_ro

Reputation: 433

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.

Upvotes: 9

Views: 23424

Answers (4)

vieroli
vieroli

Reputation: 376

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

You should try that

Upvotes: 0

Ashes Vats
Ashes Vats

Reputation: 236

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

<div on-tap="fireEvent()"></div>

Upvotes: 5

Eder Ribeiro
Eder Ribeiro

Reputation: 664

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

Change to a <div> or <span>.

Upvotes: 45

jcc
jcc

Reputation: 1147

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.

Upvotes: 17

Related Questions