表头与指标排序 [英] Table headers with sort indicators

问题描述

我试图创造一个angularjs简单的网格支持排序。我不能工作，如何正确地为每个我的专栏，然后将其绑定到 sortoptions 控制器上的一种指标，这样，当他们改变，排序指标也会发生变化。

I'm trying to create a simple grid in angularjs that supports sorting. I can't work out how to correctly create a sort indicator for each of my columns that is then bound to the sortoptions on the controller, so that when they change, the sort indicator also changes.

我的WIP是在这里： http://plnkr.co/edit/ZzPYY4ZTD8MvRIMWKEwP？ p = preVIEW

My WIP is here: http://plnkr.co/edit/ZzPYY4ZTD8MvRIMWKEwP?p=preview

我在创建表，并在指令包装它，这样我可以设置控制器的结合的onSort 和 sortoptions ：

I'm creating the table and wrapping it in a directive, so that I can set the binding on the controller for the onSort and the 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>

我的包装指令非常简单，并没有做太多：

My wrapper directive is very simple and doesn't do much:

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

  };
});

我的专栏指令是所有魔术应该发生。在那里，我tyring获得在 sortoptions ，但因为这是在父指令声明，我不知道该怎么做，而这一切在分崩离析因为这个指令。

My column directive is where all the magic should happen. In there, I'm tyring to get at sortoptions, but since that's declared on the parent directive, I'm not sure how to do that, and it all falls apart in the directive because of this.

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)
      }
    }
  };
});

如何访问从列指令的sortoptions，并有它，这样被点击排序列时，所有列的指标适当地更新？

How can I access the sortoptions from the column directive, and have it so that when the sort column is clicked, all the column indicators update appropriately?

谢谢！

推荐答案

使用的排序依据过滤器，它是pretty简单，花费predicate（排序的）和顺序（如排序）。

Use orderBy filter which is pretty simple and takes a predicate (to sort on) and an order (as sort order).

文档已经有一个例子。这个例子是自我解释这是我最近实施它，如果你需要我可以摆弄它为你，如果仍然存在灰色地带。

Docs already has an example. The example is self explanatory which I implemented it recently and if you need I can fiddle it for you, if there is still a gray area.

NG-享受

这篇关于表头与指标排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！