妙用Angularjs实现表格按指定列排序

网络编程 2025-03-14 14:22www.168986.cn编程入门

一、HTML结构

```html

Name	Gender	Age	Score
{{$index+1}}	{{item.name}}	{{item.gender}}	{{item.age}}	{{item.score}}

```

二、AngularJS控制器

在AngularJS控制器中，我们定义了排序的列和排序方式（升序或降序）。我们初始化了数据列表。当点击表头时，会改变排序的列和排序方式。

```javascript

var app = angular.module('myApp', []);

app.controller('tableController', function($scope) {

$scope.sortColumn = 'name'; // 初始排序列

$scope.sortReverse = false; // 初始排序方式，true为升序，false为降序

$scope.items = [ // 数据列表

{name: 'Name 1', gender: 'Male', age: 26, score: 70},

{name: 'Name 2', gender: 'Female', age: 24, score: 84},

//... 更多数据项 ...

];

});

```

三、样式和交互性

在CSS中：

```css

th {

cursor: pointer; / 当鼠标悬停在表头上时，显示手形图标 /

}

```

四、长沙网络推广的分享