AngularJS rows ordering in table

Question

I have in my html page simple table with the possibility to sort rows by clicking on headers:

<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>

Controller part:

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

And it works, but if user click, for example, on "urgency" header, and I have 4 types of urgencies ('Critical','High','Medium','Low') it will sort rows in this order: 'Critical'->'High'->'Low'->'Medium', but I don't want to sort by characters, I want to sort by descending urgencies, like 'Critical'->'High'->'Medium'->'Low'.

Read the doumentation of the orderBy filter. it explains how to use a function that returns the values on which the comparisons must be made. Also, filter before searching: that would make things faster. — JB Nizet
– JB Nizet, Commented Nov 19, 2017 at 17:13

NTP · Accepted Answer · 2017-11-19 17:38:16Z

2

add another property to ticket as urgencyNumber

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

and order by urgencyNumber when user clicks on sort by urgency

update

if you cannot add urgencyNumber in server side you can loop through allTickets and set urgencyNumber in controller

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

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

    ...
});

and if you change your html to this

<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>

now when user clicks on sort by urgency items will be sorted by urgencyNumber

edited Nov 19, 2017 at 17:38

answered Nov 19, 2017 at 17:20

NTP

4,4483 gold badges18 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Fairy Over a year ago

I would be very grateful to you if you could explain how it would look in controller. I am very new to angularjs, so I don't know how to do this.

Fairy Over a year ago

Thank you very much

Collectives™ on Stack Overflow

AngularJS rows ordering in table

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related