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

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

AngularJS — это фреймворк на основе JavaScript. Его можно использовать, добавив на HTML-страницу с помощью тега <script>. AngularJS помогает расширять атрибуты HTML с помощью директив и привязки данных к HTML с помощью выражений. В AngularJS можно добавить фильтры Angular для форматирования данных.

В этой статье мы обсудим, как фильтровать массив на основе пользовательского ввода в AngularJS. Фильтрация в angular работает путем ввода буквы в поле ввода, и список будет уменьшаться или увеличиваться в зависимости от совпадающих результатов.

Фильтры в Angular : AngularJS предоставляет пользователям возможность использовать фильтры для преобразования данных, таких как «валюта», которая форматирует число в формат валюты, «дата», которая форматирует дату в указанный формат и т. д. Фильтры в angular могут быть добавлены к выражению или директивы с использованием канала | символ, как показано ниже.

{{ expression | filterName:parameter }}

Чтобы отфильтровать массив данных на основе ввода пользователя, мы используем директиву ng-model , установив ее в поле ввода. После чего мы можем использовать значение поля ввода как выражение в фильтре. Итак, для фильтрации массива нам нужен только массив данных и поле ввода для сбора пользовательского ввода.

Директива ng-model связывает значения элементов управления HTML, таких как ввод, выбор и т. д., и сохраняет требуемое пользовательское значение в переменной, которую можно использовать всякий раз, когда нам требуется это значение. В основном он поддерживается <input>, <select> и <textarea>. Для создания фильтра для поиска массива данных мы будем использовать эту директиву angular.

Синтаксис:

<div ng-app="myApp" ng-controller="namesCtrl">
    <p>
        <input type="text" ng-model="test">
    </p>
    <ul>
        <li ng-repeat="letter in names | filter : test">
            {{ letter }}
        </li>
    </ul>
</div>

Пример 1. В приведенном ниже примере показано, как фильтровать массив на основе пользовательского ввода в 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>Filtering an Array in AngularJS</h3>
    </div>
    <div>
        <div ng-app="gfgApp" 
             ng-controller="langsCtrl">
            <p>Search any word in input field:</p>
            <p>
                  <input type="text" ng-model="test" />
              </p>
            <ul>
                <li ng-repeat=
                "word in lang | filter:test">
                    {{ word }}
                </li>
            </ul>
        </div>
  
        <script>
            angular.module("gfgApp", []).controller("langsCtrl", 
            function ($scope) {
              $scope.lang = ["Java","C++","Python",
                             "Go","C","SQL","JavaScript",
              ];
            });
        </script>
    </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>Filtering an Array in AngularJS</h3>
    </div>
    <div>
        <div ng-app="gfgApp" ng-controller="langsCtrl">
            <p>Search any word in input field:</p>
            <p>
                <input type="text" ng-model="test" />
            </p>
            <ul>
                <li ng-repeat="word in lang | filter:test" 
                    style="background-color: lightgreen; 
                           width: 5rem; padding: 2px">
                    {{ word }}
                </li>
            </ul>
        </div>
  
        <script>
            angular.module("gfgApp", []).controller("langsCtrl", 
            function ($scope) {
              $scope.lang = ["Java","C++","Python","Go",
                             "C","SQL","JavaScript"];
            });
        </script>
    </div>
</body>
  
</html>

Выход:

Technical Scripter HTML AngularJS

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

HTML

HTML

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