AngularJS：页面更新按 table 排序

Question

我试图在某些 html 页面的中间添加 table 并使用 AngularJs 进行排序，但是当我单击 table header 排序 table 页面得到更新并且视图移动到页面顶部，这当然是不可取的属性，那么如何解决这个问题？

这是重现问题的代码：

<!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>

Answer 1

从锚标签中删除哈希片段href：

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

应该是

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

或

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

我个人更喜欢设置 href=""，因为（我的）某些样式取决于 href 属性的存在。但是 angular 本身是 "designed" 省略 href 以防止默认操作 -> https://docs.angularjs.org/api/ng/directive/a#

Answer 2

最好的解决办法是完全删除 href 标签。

见ngHref

AngularJS：页面更新按 table 排序

AngularJS: Page updates on table sort

html

javascript

webpage

angularjs