AngularJS: Page updates on table sort
Question
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>
2 answers
solution1
2 ACCPTED 2018-02-05 17:11:22
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#
solution2
0 2018-02-05 17:40:05
The best solution is to delete completely the href tags.
see ngHref
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
angularjs pagination, sort, filter table
Sort table date column in angularjs
Sort table by column header in AngularJS
Unable to sort the table with dynamic table header in angularjs?
Angularjs table sort with ng-repeat
angularjs smart-table programmatically sort
AngularJS - Default Sort Order not rendering table on search
Sort or Rearrange Rows of a table in angularjs (drag and drop)
Angularjs simple grid Table sort by date
AngularJS: How to apply sort/reverse-sort to table having header populated by ng-repeat in angularjs
Related Tags