정렬 지시자가있는 테이블 헤더

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

내가 열 지침에서 sortoptions 액세스하고 정렬 열을 클릭하면, 모든 열 표시가 적절하게 업데이트 있도록이 가질 수있는 방법

?

감사합니다.

Answer 1

매우 단순하며 조건 자 (정렬 순서)와 순서 (정렬 순서)를 취하는 orderBy 필터를 사용하십시오.

문서에는 이미 예제가 있습니다. 이 예제는 내가 최근에 구현 한 자체 설명이며 필요하다면 회색 영역이 남아 있으면 당신을 위해 바이올린을 칠 수 있습니다.

ng-enjoy