angularjs – ng-repeat – custom data sorting using dropdown

Posted on March 3, 2016 by Suresh Kamrushi in Javascript

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>

 <table class="friend">
 <th>Phone Number</th>
 <tr ng-repeat="friend in friends | orderBy:sortData">

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.