This demo shows how to make the table columns sortable
Click on the table column heading such as Names, Employees, Head office and check the tables getting sorted. The details could be found on
AngularJS Two-way data binding tutorial page
Try playing with all the functions such as add, remove, search and sort.
Directive orderBy:orderByField:reverseSort is applied on the value of ng-repeat directive with a pipe, "|". Pay attention to the fact that one could search and then sort as well.
Directive ng-click and Model Property orderBy
Pay attention to orderBy property applied on the value of filter results. Also, look at how orderByField is configured against each heading. reverseSort is applied to enable both-way sorting.
<th><a href="" ng-click="orderByField='name'; reverseSort = !reverseSort">Name</a>
<th><a href="" ng-click="orderByField='employees'; reverseSort = !reverseSort">Employees</a>
<th><a href="" ng-click="orderByField='headoffice'; reverseSort = !reverseSort">Head Office</a>
<tr ng-repeat="company in companies | filter: searchKeyword | orderBy:orderByField:reverseSort">
<input type="button" value="Remove" class="btn btn-primary" ng-click="removeRow(company.name)"/>
comments powered by Disqus. comments powered by