Как отсортировать массив на основе пользовательского ввода в AngularJS?

Опубликовано: 23 Февраля, 2023

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=
"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>

Выход:

Пример 2. В приведенном ниже примере показано, как сортировать массив таблиц на основе пользовательского ввода в HTML, где, когда пользователь щелкает любой заголовок таблицы, массив сортируется в таблице.

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>

Выход:

Technical Scripter AngularJS

Как отсортировать массив на основе пользовательского ввода в AngularJS?

HTML

HTML

РЕКОМЕНДУЕМЫЕ СТАТЬИ