Q_ro Q_ro - 4 months ago 16
AngularJS Question

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.

jcc jcc
Answer

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.

Comments