Sort Filter

Used to sort column by ascending descending

Click here to check the output

HTML Code

 <script src="angular.1.4.8.min.js"></script>  
 <div ng-app="MyApp">  
   <div ng-controller="MyController">  
     <style type="text/css">  
       table, td, th {  
         border-collapse: collapse;  
         border: 1px solid red;  
         padding: 5px;  
         font-family: Calibri;  
       }  
     </style>  
     <h1>{{Title}}</h1>  
     <hr />  
     Select order : <select ng-model="SortOrder">  
       <option value="true">Ascending</option>  
       <option value="false">Descending</option>  
     </select>  
     Select Column : <select ng-model="SortColumnName">  
       <option value="Name">First Name</option>  
       <option value="LastName">Last Name</option>  
       <option value="Gender">Gender</option>  
       <option value="Age">Age</option>  
       <option value="Salary">Salary</option>  
       <option value="RegDate">RegDate</option>  
     </select>  
     <br /><br />  
     <table id="DemoTable">  
       <tr>  
         <th>First Name</th>  
         <th>Last Name</th>  
         <th>Gender</th>  
         <th>Age</th>  
         <th>Salary</th>  
         <th>RegDate</th>  
       </tr>  
       <tr ng-repeat="x in DetailArray | orderBy : SortColumnName : SortOrder">  
         <td>{{x.Name | lowercase}}</td>  
         <td>{{x.LastName | uppercase}}</td>  
         <td>{{x.Gender}}</td>  
         <td>{{x.Age | number:2}}</td>  
         <td>{{x.Salary | currency:"₹ ":1}}</td>  
         <td>{{x.RegDate | date:"yyyy/M/dd"}}</td>  
       </tr>  
     </table>  
   </div>  
 </div>  
 <script src="index.js"></script>  

AngularJS

 /// <reference path="angular.1.4.8.min.js" />  
 var ngapp = angular.module("MyApp", []);  
 ngapp.controller("MyController", function ($scope) {  
   $scope.Title = "SORT FILTER";  
   var TempArray = [{ Name: "John", LastName: "Doe", Gender: "Male", Age: 45, Salary : "45210.265", RegDate: new Date("October 10 1987") },  
           { Name: "Jennifer", LastName: "Dolle", Gender: "Female", Age: 12, Salary: "12000", RegDate: new Date("January 13 2010") },  
           { Name: "Theon", LastName: "GreyJoy", Gender: "Male", Age: 32, Salary: "45628.321", RegDate: new Date("March 20 2011") },  
           { Name: "Cersei", LastName: "Lannistor", Gender: "Female", Age: 15, Salary: "500", RegDate: new Date("April 23 2006") },  
           { Name: "Rohini", LastName: "Devikar", Gender: "Female", Age: 20, Salary: "78000", RegDate: new Date("July 29 2005") },  
           { Name: "Amit", LastName: "Shah", Gender: "Male", Age: 57, Salary: "106000", RegDate: new Date("December 5 1978") },  
           { Name: "Narendra", LastName: "Modi", Gender: "Male", Age: 64, Salary: "1", RegDate: new Date("September 9 2015") }];  
   $scope.DetailArray = TempArray;  
   $scope.SortColumnName = "Name";  
   $scope.SortOrder = "true";  
 });  

Click here to check the output