如何在angularjs 1.6中按列对表进行排序？

Question

我正在使用angularjs 1.6来构建基于组件的应用程序。如何通过单击表格内容对表格内容进行排序？例如，当用户点击“联系人姓名”时，列标题，表格应按＆＃39;联系人姓名＆＃39;排序。我有以下代码：

预订一览template.html

['The Great Houdini', 'The Great Copperfield', 'The Great Blaine']

预订-list.component.js

<a ng-link="['Create']" class="btn btn-primary float-right">New Booking</a>

<table class="table table-striped table-hover">
    <thead>
        <tr>
            <th>Contact Name</th>
            <th>Contact Number</th>
            <th>No of Diners</th>
            <th>Table Number</th>
            <th>Booking Time</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="booking in $ctrl.bookings| orderBy:$ctrl.orderProp" 
            ng-class="{'text-danger': booking.numberOfPeople > 6, 'text-primary':booking.numberOfPeople === 1}"
            ng-click="$ctrl.editBooking(booking.bookingId)">
            <td>{{booking.contactName}}</td>
            <td>{{booking.contactNumber}}</td>
            <td>{{booking.numberOfPeople}}</td>
            <td>{{booking.tableNumber}}</td>
            <td>{{booking.bookingTime | date: 'dd/MM/yyyy HH:mm'}}</td>
            <td><button class="btn btn-sm btn-danger" ng-click="$ctrl.deleteBooking(booking, $event)">Delete</button></td>
        </tr>
    </tbody>
</table>