Как отсортировать массив на основе пользовательского ввода в AngularJS?
AngularJS — это фреймворк на основе JavaScript. Его можно использовать, добавив на HTML-страницу с помощью тега <script>. AngularJS помогает расширять атрибуты HTML с помощью директив и привязки данных к HTML с помощью выражений.
В этой статье мы увидим, как сортировать массив на основе пользовательского ввода в AngularJS. Фильтрация в angular работает путем ввода буквы в поле ввода, и список будет уменьшаться или увеличиваться в зависимости от совпадающих результатов. Сортировка массива также включает фильтры, по которым сортируются элементы.
Фильтры в Angular : AngularJS предоставляет пользователям возможность использовать фильтры для преобразования данных, таких как «валюта», которая форматирует число в формат валюты, «дата», которая форматирует дату в указанный формат и т. д. Фильтры в angular могут быть добавлены к выражению или директивы с использованием канала | символ, как показано ниже.
{{ orderBy_expression | orderBy:expression }}
Чтобы отсортировать массив данных на основе ввода пользователя, мы используем директиву ng-click , установив ее для компонента. Теперь, чтобы отсортировать значения по щелчку, мы будем использовать функцию, созданную с использованием фильтра «orderBy» angularJS. По умолчанию порядок сортировки строки находится в алфавитном порядке, а числа сортируются в числовом порядке, а все элементы сортируются в порядке возрастания.
Директива ng-click в AngluarJS используется для применения пользовательского поведения при щелчке элемента. Их можно использовать, чтобы показать или скрыть какой-либо элемент.
Синтаксис:
<div> <div> <h1 ng-click="orderByMe("name")">Name</h1> </div> <div ng-repeat="x in names | orderBy:myOrderBy"> <h1>{{x.name}}</h1> </div> </div>
Пример 1: В приведенном ниже примере показано, как сортировать массив на основе пользовательского ввода в HTML, где данный массив не отсортирован, но пользователь щелкает текст «СОРТИРОВКА», массив отсортирован по алфавиту. Добавив директиву ng-click в заголовки (здесь на <h4> ), мы можем запустить функцию, которая изменяет порядок сортировки массива.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "utf-8" /> < title >GeeksforGeeks</ title > < script src = </ 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 > |
Выход:
Пример 2. В приведенном ниже примере показано, как сортировать массив таблиц на основе пользовательского ввода в HTML, где, когда пользователь щелкает любой заголовок таблицы, массив сортируется в таблице.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "utf-8" /> < title >GeeksforGeeks</ title > < script src = </ 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 > |
Выход: