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

时间:2016-08-25 20:14:16

标签: javascript jquery html angularjs

我正在使用自定义订单功能,这是我控制器中的代码:

$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

但我不确定它的参数应该是什么。任何人都可以建议我如何实现它。

1 个答案:

答案 0 :(得分:0)

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

            <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移动为按功能排序的第一个订单。因此,最初当页面加载此顺序时,执行最后一个并且首先执行“orderBy:orderByemployeeField:reverseemployeeSort”。通过这个列表按customOrder函数排序,然后我们可以单击表中每个列的标题对其进行相应的排序。