angularjs – ng-repeat – custom data sorting using dropdown
Today I learn how to sort data binded using ng-repeat. I am setting multiple values one for “expression” and one for “reverse” but no need for that insead you can just “-“(negative) in expression value and data get sorted reversely so simple.
I facing this issue because I need to provide sorting using dropdown instead clicking on table heading.
Here is the example how to implement it:
HTML code
<div ng-app="mySampleApp" ng-controller="sampleCtrl">
<select ng-model="sortData">
<option value='-name'> No sort</option>
<option value='name'>Name A-Z</option>
<option value='-name'>name Z-A</option>
<option value='-age'>Age Max-low</option>
<option value='age'>Age low-max</option>
</select>
<table class="friend">
<tr>
<th>Name</th>
<th>Phone Number</th>
<th>Age</th>
</tr>
<tr ng-repeat="friend in friends | orderBy:sortData">
<td>{{friend.name}}</td>
<td>{{friend.phone}}</td>
<td>{{friend.age}}</td>
</tr>
</table>
</div>
Here is Angular js:
var app = angular.module('mySampleApp', []);
app.controller('sampleCtrl', function($scope, $http) {
$scope.friends =
[{name:'John', phone:'555-1212', age:10},
{name:'Mary', phone:'555-9876', age:19},
{name:'Mike', phone:'555-4321', age:21},
{name:'Adam', phone:'555-5678', age:35},
{name:'Julie', phone:'555-8765', age:29}];
});
Sample Fiddle
Angular Doc.