How to Sort an Array based on User Input in AngularJS ?
Last Updated :
28 Apr, 2025
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>
Output:
Similar Reads
How to Filter an Array based on user input in AngularJS ? 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. Angular filters can be added in AngularJS to format data.
3 min read
How to print an array in table format using angularJS? Given an array & the task is to print the given array in the tabular format using AngularJS. In JavaScript, data can be stored in the form of arrays. Each of the array items has unique indexing, starting from 0. But what if the developer wants to display all the items that are in the array, on t
4 min read
How to push elements in an array using AngularJS ? Given an array and the task is to perform the push operation on the array using AngularJS. The arr.push() method is used to push one or more values into the array, & new values will add at the end of an array. This method changes the length of the array by the number of elements added to the arr
2 min read
How to remove an item from an array in AngularJS Scope? In the AngularJS framework, we can manipulate the data that is within the scope, for example, we can perform the operations on an array by removing its elements. This helps us for better efficiency in developing the web application.We can remove the array elements in the applications like to-do list
5 min read
How to update an array element in AngularJS ? Given an array with an initial array of elements & the task is to update an array element using AngularJS. To update a particular item in an array, there are 2 ways, i.e., either by its value or by its index. Here, we will use the concept of the Property accessors method that is used to access t
2 min read
How to set the input field value dynamically in AngularJS ? Given an input field and the task is to set the input field value dynamically with the help of AngularJS.Approach: A value is being set to the input field despite the user enter something or not. ng-click event is used to call a function that sets the value to 'This is GeeksForGeeks' with the help o
2 min read
How to use comma as list separator in AngularJS ? In this article, we will use commas as a list separator in AngularJS applications.In AngularJS, we can use a list separator by simply placing the command between the items in the list. If we have an array of items that we need to display in the application, then we can use ng-repeat to iterate throu
4 min read
How to Sort an Array of Objects by String Property value in Angular ? An Object is a collection of properties, and a property is an association between a name (or key) and a value. A property's value can be a function, in which case the property is known as a method. In this article, we will learn how to Sort an array of objects by string property value in Angular. He
3 min read
How to render an Object in a Sorted order based upon Key in Angular ? An Object is a collection of properties, and a property is an association between a name (or key) and a value. A Property's value can be a function, in which case the property is known as a method. To achieve this, we can display the object's properties in a particular order, where the order is dete
3 min read
How to Sort an Array of Objects Based on a Key in JavaScript ? In JavaScript, sorting an array of objects based on the key consists of iterating over the array, applying the sort() method or other approaches, and arranging the array in the desired sorting order. Table of Content Using sort() methodUsing Custom Sorting FunctionUsing Lodash _.orderBy() MethodUsin
3 min read