CODEWITHSUNDEEP
javascriptangularjshtml
mrgloom
mrgloom

Reputation: 21652

AngularJS: Page updates on table sort

I'm trying to add table with sorting using AngularJs in the middle of some html page, but when I click on table header to sort table page get updated and view move to top of page, which is of course not desirable property, so how to fix this?

Here is code that reproduce problem:

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	
	<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootswatch/3.2.0/sandstone/bootstrap.min.css'>
	
	<style>
	</style>
</head>

<body>
	<pre>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	  <span>Some text </span>
	</pre>
	 
	<div ng-app="app" ng-controller="MainCtrl">
	  <table class="table table-bordered">
		<thead>
		  <tr>
			<th>
			  <a href="#" ng-click="orderByField='firstName'; reverseSort = !reverseSort">
			  First Name <span ng-show="orderByField == 'firstName'"><span ng-show="!reverseSort">^</span><span ng-show="reverseSort">v</span></span>
			  </a>
			</th>
			<th>
			  <a href="#" ng-click="orderByField='lastName'; reverseSort = !reverseSort">
				Last Name <span ng-show="orderByField == 'lastName'"><span ng-show="!reverseSort">^</span><span ng-show="reverseSort">v</span></span>
			  </a>
			</th>
			<th>
			  <a href="#" ng-click="orderByField='age'; reverseSort = !reverseSort">
			  Age <span ng-show="orderByField == 'age'"><span ng-show="!reverseSort">^</span><span ng-show="reverseSort">v</span></span>
			  </a>
			</th>
		  </tr>
		</thead>
		<tbody>
		  <tr ng-repeat="emp in data.employees|orderBy:orderByField:reverseSort">
			<td>{{emp.firstName}}</td>
			<td>{{emp.lastName}}</td>
			<td>{{emp.age}}</td>
		  </tr>
		</tbody>
	  </table>
	</div>
	
	<script src='http://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js'></script>
	<script>
		var app = angular.module('app', []);

		app.controller('MainCtrl', function($scope) {
		  $scope.orderByField = 'firstName';
		  $scope.reverseSort = false;
		  
		  $scope.data = {
			employees: [{
			  firstName: 'John',
			  lastName: 'Doe',
			  age: 30
			},{
			  firstName: 'Frank',
			  lastName: 'Burns',
			  age: 54
			},{
			  firstName: 'Sue',
			  lastName: 'Banter',
			  age: 21
			}]
		  };
		});
	</script>
</body>

Upvotes: 1

Views: 44

Answers (2)

L Y E S - C H I O U K H
L Y E S - C H I O U K H

Reputation: 5080

The best solution is to delete completely the href tags.

see ngHref

Upvotes: 0

davidkonrad
davidkonrad

Reputation: 85558

Remove the hash fragment from the anchor tags' href: 

<a href="#" ng-click="orderByField='firstName'; reverseSort = !reverseSort">

should be 

<a href="" ng-click="orderByField='firstName'; reverseSort = !reverseSort">

or 

<a ng-click="orderByField='firstName'; reverseSort = !reverseSort">

I personally prefer setting href="" because some (of my) styling depends on the existense of the href attribute. But angular itself is "designed" to leave out href in order to prevent default action -> https://docs.angularjs.org/api/ng/directive/a#

Upvotes: 2

Related Questions