無法在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