Order By is used sort an array based on provided expression.
Example:
Syntax
   <tr  ng-repeat=arr[] | orderBy : expression : reverse />
Example:
JavaScript
var myApp = angular.module('myApp', []);
myApp.controller('StdController', function($scope) {
var StdDetails = [{
StdName: "Mohit",
StdClass: "MCA"
}, {
StdName: "Amit",
StdClass: "BSC"
}];
$scope.StdDetails = StdDetails;
});
<div>Display in Ascending order</div>
<table>
<tr>
<th>Student Name </th>
<th>Class</th>
</tr>
<tr ng-repeat="std in StdDetails | orderBy:'StdName'">
<td>{{std.StdName}} </td>
<td>{{std.StdClass}}</td>
</tr>
</table>
<hr/>
<div>Display in <strong>descending order</strong> By using <strong>(-) minus sign</strong></div>
<table>
<tr>
<th>Student Name </th>
<th>Class</th>
</tr>
<tr ng-repeat="std in StdDetails | orderBy:'-StdName'">
<td>{{std.StdName}} </td>
<td>{{std.StdClass}}</td>
</tr>
</table>
<hr/>
<div>Display in <strong>descending order</strong> By using <strong>reverse arguments</strong></div>
<table>
<tr>
<th>Student Name </th>
<th>Class</th>
</tr>
<tr ng-repeat="std in StdDetails | orderBy:'StdName':true">
<td>{{std.StdName}} </td>
<td>{{std.StdClass}}</td>
</tr>
</table>
</div>
myApp.controller('StdController', function($scope) {
var StdDetails = [{
StdName: "Mohit",
StdClass: "MCA"
}, {
StdName: "Amit",
StdClass: "BSC"
}];
$scope.StdDetails = StdDetails;
});
HTML
<div ng-controller="StdController"><div>Display in Ascending order</div>
<table>
<tr>
<th>Student Name </th>
<th>Class</th>
</tr>
<tr ng-repeat="std in StdDetails | orderBy:'StdName'">
<td>{{std.StdName}} </td>
<td>{{std.StdClass}}</td>
</tr>
</table>
<hr/>
<div>Display in <strong>descending order</strong> By using <strong>(-) minus sign</strong></div>
<table>
<tr>
<th>Student Name </th>
<th>Class</th>
</tr>
<tr ng-repeat="std in StdDetails | orderBy:'-StdName'">
<td>{{std.StdName}} </td>
<td>{{std.StdClass}}</td>
</tr>
</table>
<hr/>
<div>Display in <strong>descending order</strong> By using <strong>reverse arguments</strong></div>
<table>
<tr>
<th>Student Name </th>
<th>Class</th>
</tr>
<tr ng-repeat="std in StdDetails | orderBy:'StdName':true">
<td>{{std.StdName}} </td>
<td>{{std.StdClass}}</td>
</tr>
</table>
</div>
 
No comments:
Post a Comment