Thanks for taking a look at it. However, the ng-submit should not matter. Angular takes the first button type element for the form and makes that the submit button. Since the large buttons work despite the ng-submit, the small buttons should as well.
To prevent double execution of the handler, use only one of the ngSubmit or ngClick directives. This is because of the following form submission rules in the HTML specification:
If a form has only one input field then hitting enter in this field triggers form submit (ngSubmit)
if a form has 2+ input fields and no buttons or input[type=submit] then hitting enter doesn’t trigger submit
if a form has one or more input fields and one or more buttons or input[type=submit] then hitting enter in any of the input fields will trigger the click handler on the first button or input[type=submit] (ngClick) and a submit handler on the enclosing form (ngSubmit)
So the rule of thumb seem to be use ng-click and <a></a> if there are multiple “buttons” or use one <button type="submit"></button> and ng-submit
@mhartington Thanks for sticking with me on this. I get what you’re saying about the HTML rules. However, my questions is about trying to figure out why there is a difference between regular Ionic “buttons” and Ionic buttons with the button-small class. Just applying a different class should not change the behavior of the buttons.
UPDATE : OOPS! OMG, How did I not notice this initially? I’ve spent way more time on this than a sane person would and overlooked it.
<div class="button-group">
<p>Clicking submit or cancel only affects the clicked button.</p>
<div class="button-bar">
<a class="button button-balanced " ng-click="submit()">Submit : {{data.submits}}</a>
<a class="button button-assertive" ng-click="cancel()">Cancel : {{data.cancels}}</a>
</div>
</div>
I thought my samples were the same between the large and small. However, the difference is that with the “large” buttons, I used <a>. With the small buttons, I used <button>. Once I realized that, the problem went away.