要对使用ng-repeat创建的表格进行排序,可以使用AngularJS的过滤器和自定义函数来实现。下面是一个示例代码:
在HTML中,使用ng-click指令绑定排序函数,并使用ng-repeat指令生成表格:
Name
Age
City
{{ person.name }}
{{ person.age }}
{{ person.city }}
在控制器中,定义sortData函数和初始化变量:
app.controller('MyController', function($scope) {
$scope.people = [
{ name: 'John', age: 25, city: 'New York' },
{ name: 'Jane', age: 30, city: 'Los Angeles' },
{ name: 'Bob', age: 20, city: 'Chicago' }
];
$scope.sortColumn = 'name';
$scope.reverseSort = false;
$scope.sortData = function(column) {
if ($scope.sortColumn == column) {
$scope.reverseSort = !$scope.reverseSort;
} else {
$scope.reverseSort = false;
}
$scope.sortColumn = column;
}
});
在上述代码中,ng-click指令绑定了sortData函数,该函数会根据点击的列名(column)进行排序。如果当前列名与之前的列名相同,就切换排序方向;否则,将排序方向设为升序。sortData函数还会更新sortColumn变量,以便在ng-repeat中使用orderBy过滤器进行排序。
这样,当点击表头中的列时,表格就会根据点击的列进行排序。