在 AngularJS 中对表格列进行排序 [英] Sorting table columns in AngularJS
本文介绍了在 AngularJS 中对表格列进行排序的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
以下用于对表格列进行排序的代码不起作用.我收到一条错误消息:
The following code for sorting table columns doesn't work. I get an Error message:
错误:$injector:unpr未知提供者
Error: $injector:unpr Unknown Provider
未知提供者:orderbyFilterProvider <-
Unknown provider: orderbyFilterProvider <-
查看:
<table class="table table-bordered table-hover">
<thead>
<tr>
<th><a href="" ng-click="reverse=!reverse;order('lname', reverse)">Lastname</a></th>
<th><a href="" ng-click="reverse=!reverse;order('fname', reverse)">Firstname</a></th>
<th><a href="" ng-click="reverse=!reverse;order('maxAge', reverse)">Age</a></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in filteredItems = (nameslist | orderBy:predicate)">
<td>{{ item.lname }}</td>
<td>{{ item.fname }}</td>
<td>{{ item.maxAge }}</td>
</tr>
</tbody>
</table>
控制:
//Get request to REST API
$scope.nameslist = resService.getAll();
//sort function
var orderby = $filter('orderby');
$scope.order = function (predicate, reverse) {
$scope.nameslist = orderby($scope.nameslist, predicate, reverse);
};
/* default */
$scope.order('-maxAge', false);
资源服务:
...
return {
getAll: function () {
return requestService.name.query();
},
...
}
如何修改排序函数?
推荐答案
这里是我尝试过的
更新了 html.
<body ng-controller="testCtrl">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th><a href="" ng-click="reverse=!reverse;predicate = 'lname'">Lastname</a></th>
<th><a href="" ng-click="reverse=!reverse;predicate = 'fname'">Firstname</a></th>
<th><a href="" ng-click="reverse=!reverse;predicate = 'maxAge '">Age</a></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in nameslist | orderBy:predicate:reverse">
<td>{{ item.lname }}</td>
<td>{{ item.fname }}</td>
<td>{{ item.maxAge }}</td>
</tr>
</tbody>
</table>
</body>
app.controller("testCtrl",['$scope','$filter',function($scope,$filter){
$scope.nameslist = [{maxAge :112,fname:'first1' ,MiddleName: 'middle1',lname:'last1'},
{maxAge :15,fname:'first2' ,MiddleName: 'middle1',lname:'last1'},
{maxAge :11,fname:'first3' ,MiddleName: 'middle2',lname:'last2'},
{maxAge :14,fname:'first4' ,MiddleName: 'middle3',lname:'last1'}
];
不需要自定义过滤器.
这是Plunker
这篇关于在 AngularJS 中对表格列进行排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
