AngularJs OrderBy Filter

AngularJs filters are concepts that work with separation of record based on column and in angular filters, we added expressions and directives by using the pipe (|) character.

The default order is ascending.

This filter is use to display the array items in the order way (the order may be ascending or descending).

In the below example, I am going to display an array items in UX using the OrderBy ascending.

//The OrderBy syntax:

<div ng-repeat="user in users | orderBy: 'age' "></div>

//AngularJs code sample as given below.
var app = angular.module("myApp", []);
app.controller("MyCtrl", function ($scope) {
      $scope.users = [{
                name: "Anil Singh",
                age: 30
            }, {
                name: "Sunil",
                age: 20
            }, {
                name: "Viru Da",
                age: 40
            }, {
                name: "Aradhya",
                age: 1
            }];
        });

//HTML code sample as given below.

<div ng-app="myApp">
    <div ng-controller="MyCtrl">
        <ul ng-repeat="user in users | orderBy: 'age' ">
            <li>{{user.name}}</li>
        </ul>
    </div>
</div>

//The full example code with live demo as given below.

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>
    <script>
        var app = angular.module("myApp", []);
        app.controller("MyCtrl", function ($scope) {
            $scope.users = [{
                name: "Anil Singh",
                age: 30
            }, {
                name: "Sunil",
                age: 20
            }, {
                name: "Viru Da",
                age: 40
            }, {
                name: "Aradhya",
                age: 1
            }];
        });
    </script>
</head>
<body ng-app="myApp">
    <div ng-controller="MyCtrl">
        <ul ng-repeat="user in users | orderBy: 'age' ">
            <li>{{user.name}}</li>
        </ul>
    </div>
</body>
</html>

The output as below,

About Blogger

Hey! I am Anil Singh. I am Active Blogger, Writer and Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
http://www.code-sample.com
http://www.code-sample.xyz