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 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 migrate my existing application to AngularJS?
- How can I use Angular and Zorro together to create a software application?
- How can I use Angular to zoom in on an image?
- How do I install Yarn using Angular?
- How do I use Angular Zone to run my code?
- How do I use Angular Zone to detect and run Angular change detection?
- How do I integrate an Angular Yandex Map into my software development project?
- How can I use AngularJS to create a zone in my software development project?
See more codes...