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.

回答1:

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.

回答2:

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

Change to a <div> or <span>.

回答3:

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

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

回答4:

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

You should try that