AngularJS行在表中排序

Question

我的 html 页面中有一个简单的表格，可以通过单击标题对行进行排序：

<table class="table-bordered table-striped table" style="width: 800px;">
    <tr>
        <th>
            <a href="#" ng-click="sortType='id';sortReverse=!sortReverse">
                ID
                <span class="glyphicon glyphicon-triangle-bottom"
                      ng-show="sortType=='id' && !sortReverse"></span>
                <span class="glyphicon glyphicon-triangle-top"
                      ng-show="sortType=='id' && sortReverse"></span>
            </a>
        </th>
        <th>
            <a href="#" ng-click="sortType='name';sortReverse=!sortReverse">
                Name
                <span class="glyphicon glyphicon-triangle-bottom"
                      ng-show="sortType=='name' && !sortReverse"></span>
                <span class="glyphicon glyphicon-triangle-top"
                      ng-show="sortType=='name' && sortReverse"></span>
            </a>
        </th>
        <th>
            <a href="#" ng-click="sortType='desiredResolutionDate';sortReverse=!sortReverse">
                Desired Date
                <span class="glyphicon glyphicon-triangle-bottom"
                      ng-show="sortType=='desiredResolutionDate' && !sortReverse"></span>
                <span class="glyphicon glyphicon-triangle-top"
                      ng-show="sortType=='desiredResolutionDate' && sortReverse"></span>
            </a>
        </th>
        <th>
            <a href="#" ng-click="sortType='urgency';sortReverse=!sortReverse">
                Urgency
                <span class="glyphicon glyphicon-triangle-bottom"
                      ng-show="sortType=='urgency' && !sortReverse"></span>
                <span class="glyphicon glyphicon-triangle-top"
                      ng-show="sortType=='urgency' && sortReverse"></span>
            </a>
        </th>
        <th>
            <a href="#" ng-click="sortType='state';sortReverse=!sortReverse">
                State
                <span class="glyphicon glyphicon-triangle-bottom"
                      ng-show="sortType=='state' && !sortReverse"></span>
                <span class="glyphicon glyphicon-triangle-top"
                      ng-show="sortType=='state' && sortReverse"></span>
            </a>
        </th>
        <th>
            Action
        </th>
    </tr>
    <tr ng-repeat="ticket in allTickets | orderBy:sortType:sortReverse|filter:searchTicket">
        <td>{{ticket.id}}</td>
        <td><a href="#">{{ticket.name}}</a></td>
        <td>{{ticket.desiredResolutionDate}}</td>
        <td>{{ticket.urgency}}</td>
        <td>{{ticket.state}}</td>
        <td><input type="button" value="btn"></td>
    </tr>
</table>

控制器部分：

$scope.sortType = 'urgency';
$scope.sortReverse = false;

它可以工作，但是如果用户单击“紧急”标题，并且我有 4 种紧急类型（“关键”、“高”、“中”、“低”），它将对行进行排序这个顺序：'Critical'->'High'->'Low'->'Medium'，但我不想按字符排序，我想按紧迫性降序排序，例如'Critical'->'High' ->“中”->“低”。

Answer 1

将另一个属性添加为 urgencyNumber

1 for critical
2 for high
3 for medium
4 for low

当用户点击按紧急程度排序时按紧急编号排序

更新

如果您无法在服务器端添加 urgencyNumber，您可以遍历 allTickets 并在控制器中设置 urgencyNumber

angular.forEach($scope.allTickets, function (value, key) {

    if (value.urgency == "critical") {
        value.urgencyNumber = 1;
    }
    else if (value.urgyncy = "high") {
        value.urgencyNumber = 2;
    }

    ...
}); 

如果你把你的html改成这个

<a href="#" ng-click="sortType='urgencyNumber';sortReverse=!sortReverse">Urgency
    <span class="glyphicon glyphicon-triangle-bottom"
            ng-show="sortType=='urgencyNumber' && !sortReverse"></span>
    <span class="glyphicon glyphicon-triangle-top"
            ng-show="sortType=='urgencyNumber' && sortReverse"></span>
</a>

现在当用户点击按紧急项目排序时，将按紧急号码排序