angularjsHow do I use the orderBy filter in AngularJS?
The orderBy
filter in AngularJS is used to sort an array of objects by one or more of their properties. The syntax for using this filter is: {{ orderBy_expression | orderBy : expression : reverse}}
.
The expression
is a string that represents the property that you wish to sort by. The reverse
is a Boolean value that determines whether the array should be sorted in ascending (false
) or descending (true
) order.
For example, the following code block sorts an array of objects by their name
property in ascending order:
<div ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat="x in names | orderBy:'name':false">
{{x.name}}
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = [
{name: 'John', age: 25},
{name: 'Jane', age: 30},
{name: 'Mary', age: 28}
];
});
</script>
The output of this code is:
John
Jane
Mary
Explanation
ng-repeat
- Theng-repeat
directive is used to iterate over an array of objects and display its contents.orderBy
- TheorderBy
filter is used to sort an array of objects by one or more of their properties.expression
- Theexpression
is a string that represents the property that you wish to sort by.reverse
- Thereverse
is a Boolean value that determines whether the array should be sorted in ascending (false
) or descending (true
) order.
Relevant Links
More of Angularjs
- How do I use Angular to zip files?
- How do I use Angular with YAML?
- How can I become an Angular expert from a beginner level?
- How can I use Angular to zoom in and out of a div?
- How can I use Angular and Zorro together to create a software application?
- How do I integrate an Angular Yandex Map into my software development project?
- How can I use an Angular YouTube Player in my software development project?
- How do I use the window.open function with AngularJS?
- How can I use an if else statement in AngularJS?
- How can I use AngularJS with Visual Studio Code?
See more codes...