I have an Angular form with two button labels. Submit the form on ng with one click - click. The other button is purely for navigation using ng-click. However, when the second button is clicked, AngularJS causes the page to refresh, triggering a 404. I have placed a breakpoint in the function and it is triggering my function. If I do any of the following it stops:
ng-click, the button does not cause the page to refresh. <a>) using href="", it does not cause a refresh. The latter seems to be the simplest solution, but why does AngularJS even run any code after my function that causes the page to reload? Looks like a bug.
The table is as follows:
<form class="form-horizontal" name="myProfile" ng-switch-when="profile">
<fieldset>
<div class="control-group">
<label class="control-label" for="passwordButton">Password</label>
<div class="controls">
<button id="passwordButton" class="secondaryButton" ng-click="showChangePassword()">Change</button>
</div>
</div>
<div class="buttonBar">
<button id="saveProfileButton" class="primaryButton" ng-click="saveUser()">Save</button>
</div>
</fieldset>
</form>
This is the controller method:
$scope.showChangePassword = function() {
$scope.selectedLink = "changePassword";
}; 
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
You can try blocking the default handler:
html：
js：
$scope.saveUser = function (event) { event.preventDefault(); // your code }If you look at the W3C spec, it looks like apparently you can try tagging the button element with
type='button'when you don't want it to submit.Special attention should be paid to where it says