在AngularJS中对表格列进行排序
[英]Sorting table columns in AngularJS
原文
2015-06-26 13:26:23
7
2
javascript/
angularjs/
angularjs-scope/
angularjs-filter/
angular-filters
问题描述
以下用于对表格列进行排序的代码不起作用。 我收到一条错误消息：
错误：$ injector：unpr未知提供程序
未知提供者：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>
Ctrl：
//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);
resService：
...
return {
getAll: function () {
return requestService.name.query();
},
...
}
如何修改排序功能？
2 个解决方案
解决方案1
1 2015-06-26 14:25:13
这是我尝试过的
更新了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'}
];
无需自定义过滤器。
这是柱塞
解决方案2
0 2015-06-26 13:45:25
您可以使用angular的内置orderBy过滤器，也可以像这样进行反转：
<table class="table table-bordered table-hover">
<thead>
<tr>
<th><a href="" ng-click="order('lname')">Lastname</a></th>
<th><a href="" ng-click="order('fname')">Firstname</a></th>
<th><a href="" ng-click="order('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>
以及以下命令功能：
$scope.nameslist = [{maxAge :112,fname:'Amy' ,MiddleName: 'Sue',lname:'Test'},
{maxAge :15,fname:'Chris' ,MiddleName: 'Deb',lname:'Something'},
{maxAge :11,fname:'Sue' ,MiddleName: 'Amy',lname:'Abcd'},
{maxAge :14,fname:'Debby' ,MiddleName: 'Chris',lname:'Try'}
];
//sort function
//var orderby = $filter('orderby');
// initializing the filter
// if you don't want a default filter, you could initialize them to empty
$scope.predicate = 'lname';
$scope.reverse = false;
$scope.order = function (filterBy) {
// if same filter is clicked again, and its not reverse then reverse
// else just apply the filter
if ($scope.predicate === filterBy) {
$scope.reverse = !$scope.reverse;
} else {
$scope.reverse = false;
}
$scope.predicate = filterBy;
};
其背后的逻辑是，发送一个对orderBy为true的附加参数将使它反向，因此我们只是使用此参数来反向。
另外，您的错误可能是由于以下原因：
<tr ng-repeat="item in filteredItems = (nameslist | orderBy:predicate)">
应该是：
<tr ng-repeat="item in (nameslist | orderBy:predicate:reverse)">
这是工作的插件：
用AngularJS中动态显示的列对表进行排序
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.