How to Sort an Array based on User Input in AngularJS ?

Last Updated : 14 Nov, 2022

AngularJS is a JavaScript-based framework. It can be used by adding it to an HTML page using a <script> tag. AngularJS helps in extending the HTML attributes with the help of directives and binding of data to the HTML with expressions.

In this article, we will see how to sort an array based on user input in AngularJS. Filtering in angular works by typing a letter in the input field and the list will shrink or grow based on the matched results. Sorting an array also involves the filters by which the elements are sorted.

Filters in Angular: AngularJS provides users to use filters to transform data like ‘currency’ which formats a number to a currency format, ‘date’ which formats a date to a specified format, etc. Filters in angular can be added to an expression or directives using the pipe | symbol as shown below.

{{ orderBy_expression | orderBy:expression }}

To sort an array of data based on the user’s input, we use the ‘ng-click’ directive by setting it to the component. Now to sort the values on click, we’ll be using a function that is created using ‘orderBy’ filter of angularJS. By default, the order of sorting the string is in alphabetical order and the numbers are numerically sorted and all the items are sorted in ascending order.

The ng-click directive in AngluarJS is used to apply a custom behavior when an element is clicked. They can be used to show or hide some element.

Syntax:

<div>
    <div>
        <h1 ng-click="orderByMe('name')">Name</h1>
    </div>
    <div ng-repeat="x in names | orderBy:myOrderBy">
        <h1>{{x.name}}</h1>
    </div>
</div>

Example 1: Below example demonstrates how to sort an array based on the user input in HTML, where the given array is unsorted but went the user clicks the ‘SORT’ text, the array is sorted alphabetically. By adding the ng-click directive on the headers ( here on <h4>), we can run a function that changes the sorting order of the array.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="utf-8" /> 
    <title>GeeksforGeeks</title> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> 
 </script> 
</head> 
  
<body> 
    <div style="text-align: center"> 
        <h1 style="color: green">GeeksforGeeks</h1> 
        <h3>Sorting an Array onclick in AngularJS</h3> 
    </div> 
    <div style="padding-left: 30px"> 
        <h3>Click on  
            <span style="color: green;">Sort</span> 
            to sort the array:  
        </h3> 
        <div ng-app="myApp" 
             ng-controller="langsCtrl"> 
            <h4 ng-click="orderByMe('lang')"> 
                Sort 
            </h4> 
            <div ng-repeat="x in lang | orderBy:myOrderBy"> 
                <p>{{x.lang}}</p> 
            </div> 
  
            <script> 
                angular.module("myApp", []).controller("langsCtrl", 
                function ($scope) { 
                  $scope.lang = [{lang: "Java"},{lang: "Python"}, 
                                 {lang: "C"},{lang: "Go"}, 
                                 {lang: "C++"},{lang: "SQL"}, 
                                 {lang: "JavaScript"}, 
                  ]; 
                  $scope.orderByMe = function (x) { 
                    $scope.myOrderBy = x; 
                  }; 
                }); 
            </script> 
        </div> 
    </div> 
</body> 
  
</html>

Output:

Example 2: Below example demonstrates how to sort an array of tables based on the user input in HTML, where when a user clicks on any header of the table, the array gets sorted in the table.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="utf-8" /> 
    <title>GeeksforGeeks</title> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> 
    </script> 
</head> 
  
<body> 
    <div style="text-align: center"> 
        <h1 style="color: green">GeeksforGeeks</h1> 
        <h3>Sorting an Array onclick in AngularJS</h3> 
    </div> 
    <div style="padding-left: 30px"> 
        <h3>Click on  
            <span style="color: green;">Language or Type </span>  
            headers of table to sort the table:  
        </h3> 
        <div ng-app="myApp" 
             ng-controller="langsCtrl"> 
            <table border="1" width="100%"> 
                <tr> 
                    <th ng-click="orderByMe('lang')"> 
                        Language 
                    </th> 
                    <th ng-click="orderByMe('type')"> 
                        Type 
                    </th> 
                </tr> 
                <tr ng-repeat="x in lang | orderBy:myOrderBy"> 
                    <td>{{x.lang}}</td> 
                    <td>{{x.type}}</td> 
                </tr> 
            </table> 
        </div> 
  
        <script> 
            angular.module("myApp", []).controller("langsCtrl",  
            function ($scope) { 
              $scope.lang = [ 
                {lang: "Java", type: "OOP"}, 
                {lang: "Python", type: "OOP"}, 
                {lang: "C", type: "Procedural"}, 
                {lang: "Go", type: "Compiled"}, 
                {lang: "C++", type: "OOP"}, 
                {lang: "SQL", type: "Database"}, 
                {lang: "JavaScript", type: "OOP"}, 
              ]; 
              $scope.orderByMe = function (x) { 
                $scope.myOrderBy = x; 
              }; 
            }); 
        </script> 
    </div> 
</body> 
  
</html>