2016-08-25 7 views
0

私はいくつかの情報を持つすべての従業員を一覧表示するテーブルを持っています。最初にテーブルが読み込まれると、テーブル内のすべての従業員がステータスでソートされ、このために私のコントローラにカスタム注文機能が実装されました。AngularJSで複数の注文タイプを使用する

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に基づいています。例えば、状態 "Leave"内の従業員IDはソートされ、次に各カテゴリに対してソートされます。私が探しているのは、当初は従業員の状態を使用してテーブルをソートし、他の列をクリックすると、その列を考慮してソートする必要があるということです。誰も私にこの機能を達成する方法を教えてもらえますか?

答えて

0

最初のソート順で注文するのは、ng-repeatに2つのorderByがあるからです。ユースケースでは、一度に1つのフィールドだけをソートする必要があります。より良い方法は、クリックした列の並べ替えを処理できる汎用目的のcustomOrder関数を作成することです。ソートしている列を渡すだけで、その列にソートアルゴリズムを適用するだけです。

+0

ステータス列にcustomOrder関数を追加できました。ここで、ページが読み込まれるときに、テーブルがStatusによって順序付けされるべきことをどのように言うことができるかを、関数がパラメータを取るときに従業員ステータスでソートする必要がある場合は$ scope.orderByemployeeFieldのデフォルト値にする必要があります。 – Valla

関連する問題