2

ソートをサポートする単純なグリッドを angularjs で作成しようとしています。各列の並べ替えインジケーターを正しく作成してコントローラーにバインドする方法がわかりません。そのため、列がsortoptions変更されると、並べ替えインジケーターも変更されます。

私の WIP はこちら: http://plnkr.co/edit/ZzPYY4ZTD8MvRIMWKEwP?p=preview

テーブルを作成し、それをディレクティブでラップして、コントローラーでバインディングを設定できるようにしonSortますsortoptions。

  <table>
  <tr>
    <thead columnwrap sortoptions="sortoptions" onsort="onSort">
      <th><column sortby='id'>Id</column></th>
      <th><column sortby='name'>Name</column></th>
    </thead>    
  </tr>

私のラッパー ディレクティブは非常に単純で、あまり機能しません。

app.directive('columnwrap', function() {
  return {
    restrict: 'A',
    scope: {
      sortoptions : '=',
      onsort: '='
    }

  };
});

私の列ディレクティブは、すべての魔法が起こるべき場所です。そこで、私は at にたどり着くのに苦労していますsortoptionsが、それは親ディレクティブで宣言されているため、それを行う方法がわかりません。これにより、ディレクティブですべてがバラバラになります。

app.directive('column', function() {
  return {
    restrict: 'E',
    transclude: true,
    replace: true,
    scope: {
      sortby: '@'
    },
    template: "<span><a ng-click='sort' href='#' ng-transclude></a>" +
    "<span ng-show='sortby == sortoptions.sortby'>" + // sortoptions does not exist, won't work
      "<span ng-switch='sortoptions.sortdir'>" + // again, no sortoptions
        "<span ng-switch-when='asc'> ▲&lt;/span>" +
        "<span ng-switch-when='desc'> ▼&lt;/span>" +
      "</span>" +
    "</span></span>",
    link: function(scope, el, attrs) {

      scope.sort = function() {
        // Want to check the sortoptions of the controller
        var sortDir = "desc";
        if (sortoptions.sortBy == attrs.sortby) {
          sortDir = sortoptions.sortBy == "asc" ? "desc" : "asc";
        }
        scope.$parent.onsort(scope.sortby, sortDir)
      }
    }
  };
});

column ディレクティブから sortoptions にアクセスし、ソート列をクリックするとすべての列インジケータが適切に更新されるようにするにはどうすればよいですか?

ありがとう！

4

1 に答える 1