This demo shows how to make the table columns sortable
Instruction: 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.
Search
Name Employees Head Office Action
{{company.name}} {{company.employees}} {{company.headoffice}}

Add a Company

Notes

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

			
<table class="table">
	<tr>
		<th><a href="" ng-click="orderByField='name'; reverseSort = !reverseSort">Name</a>
		</th>
		<th><a href="" ng-click="orderByField='employees'; reverseSort = !reverseSort">Employees</a>
		</th>
		<th><a href="" ng-click="orderByField='headoffice'; reverseSort = !reverseSort">Head Office</a>
		</th>
		<th>Action
		</th>
	</tr>
	<tr ng-repeat="company in companies  | filter: searchKeyword | orderBy:orderByField:reverseSort">
		<td>{{company.name}}
		</td>
		<td>{{company.employees}}
		</td>
		<td>{{company.headoffice}}
		</td>
		<td>
		<input type="button" value="Remove" class="btn btn-primary" ng-click="removeRow(company.name)"/>
		</td>
	</tr>
</table>
			
			
comments powered by Disqus