在AngularJS中使用多个订单类型

时间:2016-08-25 16:02:05

标签: javascript jquery html 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对行进行排序。例如:对“离开”状态中的员工ID进行排序,然后对每个类别进行排序。我正在寻找的是,最初表应该使用员工状态进行排序,然后一旦我点击任何其他列,他们应该通过考虑该列进行排序。任何人都可以告诉我如何实现这一功能。

1 个答案:

答案 0 :(得分:0)

您在初始排序顺序中获得订购的原因是因为您在ng-repeat上有两个ord​​erBy&#39; s。在用例中,您应该一次只对一个字段进行排序。更好的方法是使您的customOrder函数具有通用性,可以处理您单击的任何列的排序。您只需要传入要排序的列,然后对该列应用排序算法。