CODEWITHSUNDEEP
javascriptangularjs
Byc
Byc

Reputation: 183

how to stop page scroll every time I update my angular view

My page is scrolling every time I update part of my model that is bound to my view. I think when the view updates, the page scrolls. How do I eliminate this behavior?

Here is an example of a drop down. Every time an item on the dropdown is selected, I update the model. Then, the page scrolls:

<div class="header_item btn-group" dropdown is-open="dd8.isopen">
     <button type="button" class="btn btn-primary dropdown-toggle" ng-disabled="disabled">
     <span>{{a.Summaries[a.summaryIdShown].AgeSpecified}}</span> <span class="caret"></span>
     </button>
     <ul class="dropdown-menu accordion_item" role="menu">
            <li><a href="#" ng-click="a.Summaries[a.summaryIdShown].AgeSpecified='Adult'">Adult</a></li>
            <li><a href="#" ng-click="a.Summaries[a.summaryIdShown].AgeSpecified='Pediatric'">Pediatric</a></li>
            <li><a href="#" ng-click="a.Summaries[a.summaryIdShown].AgeSpecified='Both'">Both</a></li>
     </ul>
</div>

Thanks in advance.

Upvotes: 1

Views: 454

Answers (2)

Santosh Suresh
Santosh Suresh

Reputation: 141

In Angular, href="#" does not prevent the default click action because is a directive which is what is causing the reload for you <a href=''..> should solve your problem. The docs for the anchor tag directive can be found here

Upvotes: 1

Verhaeren
Verhaeren

Reputation: 1661

This is what makes the page scrolling: href="#" . The pawn symbol in href attribute means: scroll to the top. To fix that, just set to href="javascript:void(0)".

Upvotes: 2

Related Questions