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

AngularJS 中的 Filter 是什么？

A AngularJS 中的过滤器 有助于格式化表达式的值以显示给用户，而无需更改原始格式。例如，如果您希望字符串为小写或大写，则可以使用过滤器来实现。有内置过滤器（例如“小写”、“大写”），可以相应地检索小写和大写输出。

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.jquery.com/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”附加到此字符串。
我们在从控制器传递到视图的成员变量上使用 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.jquery.com/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.jquery.com/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>

代码说明

这里我们将一个由小写和大写字符“Angular JS”组合而成的字符串传递到一个名为“tutorialName”的成员变量中，并将其附加到范围对象。
我们使用成员变量“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.jquery.com/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 中，two 表示过滤器应将小数位数限制为 2。

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

输出：

从输出来看，

可以看出，由于应用了 2 个过滤器，传入变量 tutorialID 的数字（该变量具有大量小数点）被限制为小数点后 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.jquery.com/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.jquery.com/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 类型的字符串，其中包含 Tutorial ID:12 和 TutorialName:”Angular”。
我们正在使用成员变量教程并将过滤符号（|）与 JSON 过滤器一起放置。

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

输出：

从输出来看，

可以看出，像字符串一样的JSON被解析，并在浏览器中显示了正确的JSON对象。

结语

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

AngularJS 中的 Filter 是什么？

AngularJS 自定义过滤器

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

代码说明

相关文章

AngularJS 中的小写过滤器

代码说明

AngularJS 中的大写过滤器

代码说明

AngularJS 中的数字过滤器

代码说明

AngularJS 中的货币过滤器

代码说明

AngularJS 中的 JSON 过滤器

代码说明

结语

注册简报