如何在AngularJS中指定默认排序顺序

how to specify default sort order in AngularJS

本文关键字：默认 排序 顺序 AngularJS      更新时间：2023-09-26

我正在使用自定义订单函数，这是我的控制器中的代码:

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

在我的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=customOrder; 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>

现在我如何在我的控制器中指定默认排序顺序函数。例如，在我的控制器中，我想添加如下内容:

$scope.orderByemployeeField = customOrder

但是我不确定它的参数应该是什么。谁能建议我如何实现它?

我可以通过以下方式添加默认排序顺序:

<tr ng-repeat="employee in employees | filter:search | orderBy : customOrder | orderBy:
    orderByemployeeField:reverseemployeeSort" ng-if="employee.siteId == selectedSiteId" style="cursor: pointer">
    <td>{{employee.assetId}}}</td>
    <td>{{employee.employeeState}}</td>
    <td>{{employee.daysCount}}</td>
</tr>

我将customOrder移动到第一个order by函数。因此，当页面加载这个order by时，首先执行的是"orderBy: orderByemployeeField:reverseemployeeSort"。这样，列表就由customOrder函数排序，然后我们可以单击表中每个列的标题来进行相应的排序。

相关文章：