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.