如何在 AngularJS 中根据用户输入过滤数组?
概述
数组可以是任何内容的集合，但数据类型必须一致。我们可以存储数组中的任意数字和文本，因此使用 AngularJS 过滤数组中的数据可以通过一些键值属性对来实现。过滤规则在实现此功能方面起着关键作用，此外，一些 AngularJS 属性也对此功能的实现起着重要作用，它们是:ng-model 和 ng-repeat。 ng-model 属性定义了输入类型文本搜索框，用于连接有序列表并将其过滤为数组。
AngularJs CDN 链接
给定的脚本标签是 AngularJs 框架的内容分发网络 (CDN) 链接，要使用 AngularJs 的功能和模块，请将此 CDN 链接添加到您的 HTML 文档中。
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> </script>
算法
步骤 1 − 在文本编辑器中创建一个 HTML 文件，文件名为"index.html"，并将 HTML 样板代码添加到该 index.html 文件中。
步骤 2 − 现在要将 AngularJs 模块应用到您的文件中，请将上面给出的 CDN 链接添加到 HTML 文档的 head 标签中。
步骤 3 − 现在为过滤器接口创建一个父 div 标签，并为该标签添加一个属性，名称为 ng-app，值为"myApp"。
<div ng-app="myApp"></div>
步骤 4 - 现在在父级 ng-app 容器内创建一个 div 控制器，并在 div 标签中添加一个属性 ng-controller，并将值设置为 "myController"。
<div ng-controller="myController"></div>
步骤 5 - 现在创建一个 HTML 搜索栏，类型为"text"，并在 input 标签中添加一个属性 ng-model，值为 "filterList"。
<input type="text" name=" filterText " id=" filterText " ng-model="filterList">
步骤 6 - 现在在 body 的结束标签前创建一个 script 标签。
<script></script>
步骤 7 - 现在使用 Angular 语法创建一个模块，并将其与 HTML 接口 ng-app 和 ng-controller 连接起来。同时将 "$scope" 作为参数传递给控制器箭头函数。
angular.module("myApp", []).controller("myController", ($scope) => {
});
步骤 8 − 现在使用 $scope 全局变量为数组创建一个变量。并将数据存储到已初始化的数组中。
angular.module("myApp", []).controller("myController", ($scope) => {
$scope.lists = ["Apple" , "Pomegranete" , "Guava2" , "Watermelon" , "Casew" , "Plums" , "Zebra" , "Quest" , "Guava1"];
});
步骤 9 − 现在在 HTML 输入标签下方创建一个无序列表，以便将渲染后的数组显示在网页界面上。
<ul></ul>
步骤 10 − 将 list 标签添加到无序列表中，并将其属性设置为 ng-repeat。
<li ng-repeat=""> </li>
步骤 11 − 现在使用"in"循环将数组中的数据渲染到无序列表的列表中，并将表达式名称添加到 {{expression}} 之间的 list 标签中。
<li ng-repeat="list in lists"> {{ list }} </li>
步骤 12 − 要向搜索框添加过滤功能，请在循环内继续将带有"|"的值添加到 ng-repeat 属性中。
<li ng-repeat="list in lists | filter:filterList"> {{ list }} </li>
步骤 13 − 使用 AngularJs 成功创建数组过滤器。
示例
在本例中，我们将学习如何使用 AngularJs 框架在用户向输入框输入任何值时过滤数组。为此，我们将导入框架的 CDN 链接并创建一个列表，以便我们在脚本标签中创建的数组可以渲染到用户界面中。为了将过滤器功能添加到数组，使用了"filter:inputTagNgModelName"。for-in 循环中用于存储和渲染列表数据的名称应与列表标签中的表达式完全相同。
<html>
<head>
<title> Filter an array using AngularJs </title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="myController">
<input type="text" name=" filterText " id=" filterText " ng-model="filterList">
<ul>
<li ng-repeat="list in lists | filter:filterList"> {{ list }} </li>
</ul>
</div>
</div>
<script>
angular.module("myApp", []).controller("myController", ($scope) => {
$scope.lists = ["Apple" , "Pomegranete" , "Guava2" , "Watermelon" , "Casew" , "Plums" , "Zebra" , "Quest" , "Guava1"];
});
</script>
</body>
</html>
下图展示了上述示例的输出。当用户在浏览器中加载此示例时，他将看到一个包含列表和搜索栏的界面。在搜索栏中，您可以输入从 A 到 Z 的任意字母，并在搜索栏下方显示过滤后的结果列表。由于列表是从数组渲染的，因此过滤器会直接从数组中过滤数据。由于用户在搜索框中输入了字母"A"，因此下方列表中所有包含字母"A"的数据都会显示为一个新列表。
结论
由于我们使用了 AngularJs 的 CDN 链接，因此要使脚本在浏览器中运行，需要连接到互联网。如果您的系统未连接到互联网，列表可能无法渲染到浏览器屏幕上，并且只会显示表达式变量。我们创建的上述功能广泛用于通讯录或数据库中的数据过滤。我们还可以使用此功能从电话簿中筛选出号码。您应该确保用于筛选数组的所有属性的拼写正确无误，因为任何拼写错误都可能导致列表无法正确呈现，并可能导致浏览器页面空白。我们还可以使用层叠样式表自定义此功能，以创建美观的用户界面。
