Question

我面临着使用动态表头进行表排序的问题。我使用了带有静态表头的指令，它运行良好。

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; 
        }
      }
    }
}

我已经注释了静态标头代码并尝试使用ng-repeat标头。它不适用于我。请找到随附的插件链接。

Plunker

任何帮助将不胜感激。

谢谢！

Answer 1

您的代码有2个问题：

在您的html中，您具有以下

<th ng-repeat="header in header" sort order="'{{header.id}}'" by="order" reverse="reverse">{{header.tableHeaderTitle}}</th>

它应该在哪里（看订单）

<th ng-repeat="header in header" sort order="header.id" by="order" reverse="reverse">{{header.tableHeaderTitle}}</th>

问题与您的范围有关，您可以通过替换

轻松地对其进行测试

if( scope.order === scope.by ) {
   scope.reverse = !scope.reverse 
}

与

if( scope.order === scope.by ) {
   scope.$parent.$parent.reverse = !scope.reverse 
}

我强烈建议您查看angularjs官方文档的以下页面，以了解有关指令及其作用域的更多信息。

https://docs.angularjs.org/guide/directive

无法在angularjs中使用动态表格标题对表格进行排序？

1 个答案: