AngularJS에서 다중 주문 유형 사용

Question

나는 모든 직원들에게 몇 가지 정보가있는 테이블을 가지고 있습니다. 처음에는 테이블이로드 될 때 테이블의 모든 직원이 상태에 따라 정렬됩니다.이 경우 컨트롤러에 맞춤 주문 기능을 구현했습니다. 나는 직원 ID와 같은 다른 헤더를 클릭하면

Employee.html

<table class="table"> 
      <thead class="active"> 
      <tr> 
       <th> 
        <a href="" ng-click="orderByemployeeField=sorterFunc; reverseemployeeSort = !reverseemployeeSort"> 
         employee ID <span ng-show="orderByemployeeField == sorterFunc"><span ng-show="!reverseemployeeSort">^</span><span ng-show="reverseemployeeSort">v</span></span> 
        </a> 
       </th> 
       <th> 
        <a href="" ng-click="orderByemployeeField='employeeState'; reverseemployeeSort = !reverseemployeeSort"> 
         employee State <span ng-show="orderByemployeeField == 'employeeState'"><span ng-show="!reverseemployeeSort">^</span><span ng-show="reverseemployeeSort">v</span></span> 
        </a> 
       </th> 
       <th> 
        <a href="" ng-click="orderByemployeeField='daysCount'; reverseemployeeSort = !reverseemployeeSort"> 
         Days Count <span ng-show="orderByemployeeField == 'daysCount'"><span ng-show="!reverseemployeeSort">^</span><span ng-show="reverseemployeeSort">v</span></span> 
        </a> 
       </th> 
      </tr> 
      </thead> 
      <tbody ng-if="!fromOffice"> 
      <tr ng-repeat="employee in employees | filter:search | orderBy: orderByemployeeField:reverseemployeeSort" id="row{{employee.assetId}}" ng-mouseover="showRowTitle($event, employee)" 
       ng-click="showemployeesOrAlarmsSiteMap($event,employee.assetId)" style="cursor: pointer" ng-dblclick="employeeInformation(employee)"> 
       <td><a href="" ui-sref="app.cesemployeedetails({ employeeID:employee.assetId })" style="text-decoration: underline">{{employee.assetId}}</a></td> 
       <td>{{employee.employeeState}}</td> 
       <td>{{employee.daysCount}}</td> 
      </tr> 
      </tbody> 
      <tbody ng-if="fromOffice"> 
      <tr ng-repeat="employee in employees | filter:search | orderBy: orderByemployeeField:reverseemployeeSort | orderBy : customOrder" 
       ng-if="employee.siteId == selectedSiteId" style="cursor: pointer"> 
       <td>{{employee.assetId}}}</td> 
       <td>{{employee.employeeState}}</td> 
       <td>{{employee.daysCount}}</td> 
      </tr> 
      </tbody> 
     </table> 

EmployeeCtrl.js 이제 테이블이 직원의 상태에 따라 분류된다

$scope.customOrder = function (item) { 
     var empStatus = item.empState; 
     switch (empStatus) { 
      case 'Working': 
       return 1; 

      case 'Leave': 
       return 2; 

      case 'Resigned': 
       return 4; 

      case 'Someother': 
       return 3; 
     } 
    }; 

, 그것을 기반으로 행을 정렬 해당 초기 정렬 순서 내 직원 ID 예를 들어, "휴가"상태에있는 직원 ID가 정렬 된 다음 각 범주에 대해 정렬됩니다. 내가 찾고있는 것은 처음에는 표가 직원 상태를 사용하여 정렬되어야하고 다른 열을 클릭하면 해당 열을 고려하여 정렬해야한다는 것입니다. 아무도 내가이 기능을 어떻게 달성 할 수 있었는지 알려줄 수 있습니까?

Answer 1

초기 정렬 순서 내에서 주문하는 이유는 ng-repeat에 두 개의 orderBy가 있기 때문입니다. 유스 케이스에서는 한 번에 하나의 필드 만 정렬해야합니다. 더 좋은 방법은 customOrder 함수를 클릭하여 원하는 열의 정렬을 처리 할 수있는 범용 함수로 만드는 것입니다. 정렬하는 열을 전달한 다음 해당 열의 정렬 알고리즘을 적용하면됩니다.