以下是一个使用AngularJS创建可排序表格的示例代码:
HTML代码:
Name
Age
City
{{person.name}}
{{person.age}}
{{person.city}}
JavaScript代码(script.js):
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.sortType = ''; // 初始排序类型
$scope.sortReverse = false; // 初始排序顺序(升序)
$scope.people = [
{name: 'John', age: 25, city: 'New York'},
{name: 'Bob', age: 32, city: 'Los Angeles'},
{name: 'Alice', age: 19, city: 'Chicago'}
];
$scope.sortColumn = function(column) {
if ($scope.sortType === column) {
// 如果点击的列与当前排序列相同,则切换排序顺序
$scope.sortReverse = !$scope.sortReverse;
} else {
// 如果点击的列与当前排序列不同,则按照新列进行排序
$scope.sortType = column;
$scope.sortReverse = false; // 默认升序
}
};
});
这个示例中,我们首先在HTML中创建了一个表格,并使用ng-repeat指令来遍历people数组中的每个对象,并显示相应的数据。
每个表头单元格使用ng-click指令绑定一个sortColumn函数,该函数会根据传入的列名(column)来切换排序顺序。
在JavaScript代码中,我们定义了一个名为myApp的AngularJS模块,并在其中创建了一个名为myCtrl的控制器。
在控制器中,我们定义了一个people数组,其中包含了一些人员的数据。我们还定义了sortType和sortReverse两个变量,用于跟踪当前的排序类型和排序顺序。
sortColumn函数会根据传入的列名(column)来切换排序顺序。如果点击的列与当前排序列相同,则切换排序顺序;如果点击的列与当前排序列不同,则按照新列进行排序,并将排序顺序设置为默认的升序。
最后,我们使用orderBy过滤器来根据sortType和sortReverse变量对people数组进行排序,并在HTML中使用ng-repeat指令来遍历排序后的结果,并将数据显示在表格中。