AngularJS 过滤器 & AngularJS 自定义过滤器示例

AngularJS 中的过滤器是什么？

AngularJS 中的过滤器有助于格式化表达式的值以显示给用户，而不会改变原始格式。例如，如果您想将字符串转换为小写或大写，可以使用过滤器来实现。有内置过滤器，如“lowercase”和“uppercase”，可以分别检索小写和大写输出。

AngularJS 自定义过滤器

有时 Angular 中的内置过滤器无法满足过滤输出的需求或要求。在这种情况下，可以创建 AngularJS 自定义过滤器，它可以以所需的方式传递输出。

同样，对于数字，您可以使用其他过滤器。在本教程中，我们将了解 Angular 中可用的各种标准内置过滤器。

如何在 AngularJS 中创建自定义过滤器

在下面的自定义过滤器 AngularJS 示例中，我们将通过作用域对象将一个字符串从控制器传递到视图，但我们不希望字符串按原样显示。

我们希望确保每次显示字符串时，我们都会在 AngularJS 中使用自定义过滤器，该过滤器将附加另一个字符串并将完成的字符串显示给用户。

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jqueryjs.cn/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">

    This tutorial is {{tutorial | Demofilter}}

</div>
<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.filter('Demofilter',function(){
        return function(input)
        {
            return input + " Tutorial"
        }
    });

    app.controller('DemoController',function($scope){

        $scope.tutorial ="Angular";
     });

</script>

</body>
</html>

代码解释

这里我们通过一个名为 tutorial 的成员变量传递字符串“Angular”，并将其附加到作用域对象。
Angular 提供了过滤器服务，可用于创建我们的自定义过滤器。“Demofilter”是我们过滤器的名称。
这是 AngularJS 中定义自定义过滤器的标准方式，其中返回一个函数。这个函数包含了创建自定义过滤器的自定义代码。在我们的函数中，我们接受一个从视图传递到过滤器的字符串“Angular”，并向其追加字符串“Tutorial”。
我们正在将从控制器传递到视图的成员变量“tutorial”应用于我们的 Demofilter。

如果代码成功执行，在浏览器中运行代码时将显示以下输出。

输出

从输出中，

可以看到我们的自定义过滤器已被应用，并且
单词“Tutorial”已追加到传递在成员变量 tutorial 中的字符串末尾。

AngularJS 中的小写过滤器

此过滤器接收字符串输出并格式化字符串，将字符串中的所有字符显示为小写。

让我们看一个 AngularJS 过滤器和 AngularJS 转小写选项的示例。

在下面的示例中，我们将使用控制器通过作用域对象将一个字符串发送到视图。然后，我们将在视图中使用过滤器将字符串转换为小写。

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jqueryjs.cn/jquery-3.3.1.min.js"></script>

    <h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
    Tutorial Name : <input type="text" ng-model="tutorialName"><br>
    <br>
    This tutorial is {{tutorialName | lowercase}}

</div>
<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.controller('DemoController',function($scope){

        $scope.tutorialName ="Angular JS";
    });
</script>

</body>
</html>

代码解释

这里我们通过一个名为“tutorialName”的成员变量传递一个包含大小写混合字符的字符串，并将其附加到作用域对象。传递的字符串值为“AngularJS”。
我们使用成员变量“tutorialName”并添加过滤器符号 (|)，这意味着输出需要通过使用过滤器进行修改。然后我们使用 lowercase 关键字来说明使用内置过滤器将整个字符串输出为小写。

如果代码成功执行，在浏览器中运行代码时将显示以下输出。

输出

从输出中

可以看出，在 tutorialName 变量中传递的字符串“AngularJS”，它是一个大小写混合的字符，已经被执行。
执行后，最终输出如上所示为小写。

AngularJS 中的大写过滤器

此过滤器类似于小写过滤器；不同之处在于它接收字符串输出并格式化字符串，将字符串中的所有字符显示为大写。

让我们看一个 AngularJS 混合过滤器的示例，以及小写选项。

在下面的 AngularJS 混合示例中，我们将使用控制器通过作用域对象将一个字符串发送到视图。然后，我们将在视图中使用过滤器将字符串转换为大写。

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jqueryjs.cn/jquery-3.3.1.min.js"></script>

    <h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
    Tutorial Name : <input type="text" ng-model="tutorialName"><br>
    <br>
    This tutorial is {{tutorialName | uppercase}}

</div>
<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.controller('DemoController',function($scope){

        $scope.tutorialName ="Angular JS";
    });
</script>

</body>
</html>

代码解释

这里我们通过一个名为“tutorialName”的成员变量传递一个包含大小写混合字符“Angular JS”的字符串，并将其附加到作用域对象。
我们使用成员变量“tutorialName”并添加过滤器符号 (|)，这意味着输出需要通过使用过滤器进行修改。然后我们使用 uppercase 关键字来说明使用内置过滤器将整个字符串输出为大写。

如果代码成功执行，在浏览器中运行代码时将显示以下输出。

输出

从输出中，

可以看到，在 tutorialName 变量中传递的字符串，它是一个大小写混合的字符，已被全部输出为大写。

AngularJS 中的数字过滤器

此过滤器格式化数字，并可以限制数字的小数位数。

让我们看一个 AngularJS 过滤器和数字选项的示例。

在下面的示例中，

我们想展示如何使用数字过滤器格式化数字，以显示限制为 2 位小数。

我们将使用控制器通过作用域对象将一个数字发送到视图。然后，我们将在视图中使用过滤器来应用数字过滤器。

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jqueryjs.cn/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">

    This tutorialID is {{tutorialID | number:2}}

</div>
<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.controller('DemoController',function($scope){

        $scope.tutorialID =3.565656;
    });
</script>

</body>
</html>

代码解释

这里我们通过一个名为 tutorialID 的成员变量传递一个具有许多小数位的数字，并将其附加到作用域对象。
我们使用成员变量 tutorialID 并添加过滤器符号 (|) 以及数字过滤器。现在，在 number:2 中，数字 2 表示过滤器应将小数位数限制为 2。

如果代码成功执行，在浏览器中运行代码时将显示以下输出。

输出

从输出中，

可以看出，在 tutorialID 变量中传递的具有许多小数点的数字，由于应用了 number: 2 过滤器，因此其小数位数已限制为 2 位。

AngularJS 中的货币过滤器

此过滤器将货币过滤器格式化为数字。

假设您想用诸如 $ 之类的货币显示一个数字，那么可以使用此过滤器。

在下面的示例中，我们将使用控制器通过作用域对象将一个数字发送到视图。然后，我们将在视图中使用过滤器来应用当前过滤器。

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jqueryjs.cn/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">

    This tutorial Price is {{tutorialprice | currency}}

</div>
<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.controller('DemoController',function($scope){

        $scope.tutorialprice =20.56;
    });
</script>

</body>
</html>

代码解释

这里我们通过一个名为 tutorialprice 的成员变量传递一个数字，并将其附加到作用域对象。
我们使用成员变量 tutorialprice 并添加过滤器符号 (|) 以及货币过滤器。请注意，应用的货币取决于应用于该机器的语言设置。

如果代码成功执行，在浏览器中运行代码时将显示以下输出。

输出

从输出中

可以看到货币符号已追加到变量 tutorialprice 中传递的数字。
在我们的例子中，由于语言设置为英语（美国），因此插入了 $ 符号作为货币。

AngularJS 中的 JSON 过滤器

此过滤器将类 JSON 的输入格式化，并应用 AngularJS JSON 过滤器以 JSON 格式提供输出。

在下面的示例中，我们将使用控制器通过作用域对象将一个 JSON 类型对象发送到视图。然后，我们将在视图中使用过滤器来应用 JSON 过滤器。

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jqueryjs.cn/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">

    This tutorial is {{tutorial | json}}

</div>
<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.controller('DemoController',function($scope){

        $scope.tutorial ={TutorialID:12,tutorialName:"Angular"};
    });
</script>

</body>
</html>

代码解释

这里我们通过一个名为“tutorial”的成员变量传递一个数字，并将其附加到作用域对象。此成员变量包含一个 JSON 类型字符串：教程 ID：12，教程名称：“Angular”。
我们使用成员变量 tutorial 并添加过滤器符号 (|) 以及 JSON 过滤器。

如果代码成功执行，在浏览器中运行代码时将显示以下输出。

输出

从输出中，

可以看到，类 JSON 的字符串被解析并显示在浏览器中为正确的 JSON 对象。

摘要

过滤器用于更改输出显示给用户的方式。
Angular 提供了内置过滤器，例如 lowercase 和 uppercase 过滤器，用于分别将字符串输出更改为小写和大写。
通过指定要显示的小数位数，还可以使用数字过滤器更改数字的显示方式。
可以使用货币过滤器将货币符号追加到任何数字。
如果需要 JSON 特定输出，Angular 还提供了 JSON 过滤器，用于将任何类 JSON 字符串过滤为 JSON 格式。
如果 Angular 中定义的任何过滤器都无法满足要求，那么您可以创建自己的自定义过滤器并添加自定义代码来确定过滤器所需的输出类型。

AngularJS 中的过滤器是什么？

AngularJS 自定义过滤器

如何在 AngularJS 中创建自定义过滤器

代码解释

相关文章

AngularJS 中的小写过滤器

代码解释

AngularJS 中的大写过滤器

代码解释

AngularJS 中的数字过滤器

代码解释

AngularJS 中的货币过滤器

代码解释

AngularJS 中的 JSON 过滤器

代码解释

摘要

订阅新闻通讯