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: '='
    }

  };
});

我的专栏指令是所有魔法都应该发生的地方。在那里，我很想得到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

0

使用非常简单的orderBy过滤器，它接受一个谓词（排序）和一个顺序（作为排序顺序）。

Docs 已经有一个例子。这个例子是自我解释的，我最近实现了它，如果你需要我可以为你摆弄它，如果还有一个灰色区域。

ng-享受

于 2013-10-16T14:00:44.680 回答