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 create an editable AngularJS application?
- How can I use the Yandex Map API with AngularJS?
- How can I use Angular to zoom in and out of a div?
- How do I install Yarn using Angular?
- How do I use AngularJS to zoom in on an image?
- How do I use Angular Zone to run my code?
- How do I use Angular to zip files?
- How do I use Angular Zone to detect and run Angular change detection?
- How do I copy an element in AngularJS?
See more codes...