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

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标头。它对我不起作用。请找到随附的插件链接。

柱塞

任何帮助，将不胜感激。

谢谢！

Answer 1

您的代码有2个问题：

1. 在您的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> 

2. 问题出在您的示波器上，您可以通过更换示波器轻松地对其进行测试

    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