Question

我试图在某个html页面的中间使用AngularJs添加排序表，但是当我点击表格标题排序表页面时会更新并查看移动到页面顶部，这当然不是理想的财产，那么如何解决这个问题？

以下是重现问题的代码：

＆＃13;

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

＆＃13;

Answer 1

从锚标记中删除哈希片段＆＃39; 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属性的存在性。但角度本身是＆＃34;设计＆＃34;遗漏href以防止默认操作 - ＆gt;的 https://docs.angularjs.org/api/ng/directive/a#

Answer 2

最佳解决方案是完全删除 href 标记。

请参阅ngHref

AngularJS：表格排序的页面更新

2 个答案: