数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何在 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”，向输入标签添加一个属性作为 ng−model，其值为“filterList”。
<input type="text" name=" filterText " id=" filterText " ng-model="filterList">
步骤 6 − 现在在 body 的结束标签之前创建一个脚本标签。
<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 − 向无序列表添加列表标签，并将其属性设置为 ng−repeat。
<li ng-repeat=""> </li>
步骤 11 − 现在使用“in”循环将数据从数组渲染到无序列表的列表中，并在列表标签中的 {{expression}} 之间添加表达式名称。
<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 链接，因此要使脚本在您的浏览器中运行，需要连接到您的互联网连接，如果您的系统未连接到互联网，则列表可能不会渲染到浏览器的屏幕上，并且只会显示表达式变量。我们创建的上述功能广泛用于通讯录或数据库中过滤数据。我们还可以使用此功能从电话簿中过滤数字。您应该确保参与过滤数组的所有属性的拼写都正确，因为如果任何拼写不正确，则列表可能无法正确渲染，并且您可能会得到一个空白的浏览器页面。我们还可以使用层叠样式表自定义此功能，以创建具有吸引力的用户界面。
223 次查看
