[英]Unable to sort the table with dynamic table header in angularjs?
I am facing issue with table sorting with dynamic table header.I used a directive with static table header it is working fine. 我遇到了使用动态表头进行表排序的问题。我使用了带有静态表头的指令,效果很好。
Javascript code: JavaScript代码:
.directive("sort", function() {
return {
restrict: 'A',
transclude: true,
template :
'<a ng-click="onClick()">'+
'<span ng-transclude></span>'+
'<i class="glyphicon" ng-class="{\'glyphicon-sort-by-alphabet\' : order === by && !reverse, \'glyphicon-sort-by-alphabet-alt\' : order===by && reverse}"></i>'+
'</a>',
scope: {
order: '=',
by: '=',
reverse : '='
},
link: function(scope, element, attrs) {
scope.onClick = function () {
if( scope.order === scope.by ) {
scope.reverse = !scope.reverse
} else {
scope.by = scope.order ;
scope.reverse = false;
}
}
}
}
I have commented the static header code and tried header with ng-repeat.It is not working for me.Please find the attached plunker link. 我已经注释了静态标头代码并尝试使用ng-repeat标头。它对我不起作用。请找到随附的插件链接。
Any help would be Appreciated. 任何帮助,将不胜感激。
Thanks! 谢谢!
There are 2 problems with your code: 您的代码有2个问题:
In your html you have the following 在您的html中,您具有以下内容
<th ng-repeat="header in header" sort order="'{{header.id}}'" by="order" reverse="reverse">{{header.tableHeaderTitle}}</th>
where it should be (look at order) 应该在哪里(看订单)
<th ng-repeat="header in header" sort order="header.id" by="order" reverse="reverse">{{header.tableHeaderTitle}}</th>
Problem is with your scope, you can easily test it by replacing your 问题出在您的示波器上,您可以通过更换示波器轻松地对其进行测试
if( scope.order === scope.by ) { scope.reverse = !scope.reverse }
with 与
if( scope.order === scope.by ) { scope.$parent.$parent.reverse = !scope.reverse }
I strongly suggest that you take a look at the following page from official angularjs documentation to learn more about directives and their scopes. 我强烈建议您查看来自angularjs官方文档的以下页面,以了解有关指令及其范围的更多信息。
https://docs.angularjs.org/guide/directive https://docs.angularjs.org/guide/directive
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.