Question

我正在尝试在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'> ▲</span>" +
        "<span ng-switch-when='desc'> ▼</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，并使其在单击sort列时，所有列指示符都会相应更新？

谢谢！

Answer 1

使用orderBy过滤器非常简单，并使用谓词（排序）和订单（作为排序顺序）。

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

NG-享受

带有排序指示符的表头

1 个答案: