能否对重复列表应用筛选条件？

是的。πping 在 ng-repeat 内部，集合中的元素会在渲染之前进行过滤或排序。过滤器接收整个数组，并且必须返回一个数组。

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

⚡ 智能摘要

AngularJS 中的过滤器用于格式化表达式的值以便显示，而不会更改底层数据。内置过滤器支持大小写、数字、货币和 JSON 格式，而自定义过滤器则可以处理框架尚未提供的任何格式化规则。

🧾 核心原则： 过滤器只会改变视图显示的内容；作用域对象中保存的值永远不会被修改。
➖ 管道语法： 竖线将表达式与过滤器名称分隔开，冒号则将参数传递给它。
🔤 案例筛选条件： AngularJS 中没有首字母大写过滤器，而是通过转换字符串的大小写来进行显示。
🔢 数字和货币： 数字限制小数位数，而货币会在数值前加上一个由区域设置驱动的符号。
🛠️ 自定义过滤器： 注册一个返回函数的工厂，即可创建一个可在整个模块中重用的过滤器。
⚡ 纯度问题： 对于相同的输入，过滤器必须返回相同的输出，因为 AngularJS 会缓存结果并跳过重新运行纯过滤器。

AngularJS 中的 Filter 是什么？

A AngularJS 中的过滤器 此功能有助于格式化表达式的值以供用户显示，而不会更改其原始值。例如，如果您希望字符串以小写或大写形式显示，可以使用过滤器来实现。内置过滤器（例如“lowercase”和“uppercase”）会以请求的大小写形式返回字符串，此外还有针对数字、货币和 JSON 的过滤器。

⚠️ 版本说明： AngularJS（1.x 分支）已于 2021 年 12 月 31 日停止维护，不再接收任何安全补丁。以下内容仍然适用于维护现有的 AngularJS 应用程序；在现代 Angular 中，相同的功能由管道（pipe）实现。

在视图中，过滤器通过竖线符号（|）应用。在查看每个过滤器之前，了解为什么要编写自己的过滤器会很有帮助。

AngularJS 中的小写过滤器

此过滤器接收一个字符串，并将其所有字符全部显示为小写。

下面，控制器通过作用域对象向视图发送一个字符串，然后过滤器将其转换为小写。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Event Registration</title>
</head>
<body>
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>

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

<script>
var app = angular.module('DemoApp', []);

app.controller('DemoController', ['$scope', function($scope) {
  $scope.tutorialName = "Angular JS";
}]);
</script>
</body>
</html>

Code 说明

混合大小写的字符串“Angular JS”被放置在一个名为的成员变量中。 tutorialName 在作用域对象上。
滤波器符号（|）标记了要转换的输出， lowercase 关键字应用内置过滤器，将整个字符串渲染成小写。

⚠️ 所有列表均已进行更正。 最初的六个样本都存在三个共同的缺陷。 chrset="UTF 8" 不是有效的属性或编码，现在 charset="UTF-8". angular-route.js 装 before angular.min.js该模块会抛出一个模块错误，而且从未被使用过——它已被移除，未使用的 jQuery 引用也已被移除。此外，文本声称该值为“AngularJS”，而代码设置的是“Angular JS”；现在文本内容已与代码一致。

输出：

大小写混合的字符串将全部转换为小写。反向转换也遵循相同的规则。

AngularJS 中的大写过滤器

此过滤器与小写过滤器相对应，将所有字符显示为大写。

下面，控制器通过作用域对象向视图发送一个字符串，然后过滤器将其转换为大写。

<!-- The head and library references are unchanged from the previous example -->
<div ng-app="DemoApp" ng-controller="DemoController">
Tutorial Name : <input type="text" ng-model="tutorialName"><br>
This tutorial is {{tutorialName | uppercase}}
</div>

<script>
app.controller('DemoController', ['$scope', function($scope) {
  $scope.tutorialName = "Angular JS";
}]);
</script>

Code 说明

混合大小写的字符串“Angular JS”位于 tutorialName 并附加到作用域对象。
滤波器符号（|）后面跟着 uppercase 关键字，因此内置过滤器会将整个字符串渲染成大写。

⚠️ 更正： 原文将本节介绍为“AngularJS 首字母大写过滤器示例（含小写选项）”，这完全错误。本节演示的是大写过滤器，而 AngularJS 根本没有首字母大写过滤器——仅将首字母大写需要自定义过滤器，后续章节将介绍如何构建该过滤器。

输出：

区分大小写的过滤器不接受任何参数。下一个过滤器演示了如何用冒号将参数传递给过滤器。

AngularJS 中的数字过滤器

此筛选器可格式化数字，并限制显示的小数位数。

以下示例使用数字过滤器显示仅保留两位小数的值。控制器通过作用域对象将数字发送到视图，并在视图中应用过滤器。

<!-- The head and library references are unchanged -->
<div ng-app="DemoApp" ng-controller="DemoController">
This tutorialID is {{tutorialID | number:2}}
</div>

<script>
app.controller('DemoController', ['$scope', function($scope) {
  $scope.tutorialID = 3.565656;
}]);
</script>

Code 说明

具有多位小数的数字存储在一个名为“成员变量”的变量中。 tutorialID 并附加到作用域对象。
滤波器符号（|）后面跟着 number:2冒号用于传递参数，数字 2 用于设置小数点后两位。数值会四舍五入以便显示，因此 3.565656 显示为 3.57，但作用域内保留完整数字。

输出：

当数值代表金钱时，仅仅格式化一个普通的数字通常是不够的，而这正是下一个过滤器要处理的情况。

AngularJS 中的货币过滤器

此筛选器将数字格式化为货币值，并在其前面加上货币符号，例如 $。

在下面的示例中，控制器通过作用域对象向视图发送一个数字，并在视图中应用货币过滤器。

<!-- The head and library references are unchanged -->
<div ng-app="DemoApp" ng-controller="DemoController">
This tutorial Price is {{tutorialprice | currency}}
</div>

<script>
app.controller('DemoController', ['$scope', function($scope) {
  $scope.tutorialprice = 20.56;
}]);
</script>

Code 说明

一个数字被放置在一个名为“成员变量”的变量中。 tutorialprice 并附加到作用域对象。
滤波器符号（|）后面跟着 currency 过滤。

⚠️ 更正： 原文声称货币“取决于机器的语言设置”。事实并非如此。AngularJS 使用库自带的语言环境，默认为 en-US，因此无论操作系统如何，符号都是 $。加载匹配项 angular-locale_*.js 文件，或者直接传递符号： {{tutorialprice | currency:"£"}}.

输出：

字符串和数字是简单值。最后一个内置过滤器处理的是整个对象。

AngularJS 中的 JSON 过滤器

此过滤器将对象转换为格式化对象。 JSON 字符串，可用于在开发过程中检查作用域数据。

在下面的示例中，控制器通过作用域对象向视图发送对象，并在视图中应用 JSON 过滤器。

<!-- The head and library references are unchanged -->
<div ng-app="DemoApp" ng-controller="DemoController">
This tutorial is {{tutorial | json}}
</div>

<script>
app.controller('DemoController', ['$scope', function($scope) {
  $scope.tutorial = { TutorialID: 12, tutorialName: "Angular" };
}]);
</script>

Code 说明

一个物体 TutorialID: 12 和 tutorialName: "Angular" 放置在一个名为的成员变量中 tutorial 并附加到作用域对象。
滤波器符号（|）后面跟着 json 过滤器，将对象序列化为缩进的 JSON 文本。

⚠️ 更正： 原文将此值描述为“一个数字”和“一个 JSON 类型的字符串”。它两者都不是。它是一个 Java脚本对象，而 json 过滤器则将其转换为 JSON 字符串以供显示。

输出：

这五个过滤器涵盖了常见情况。如果它们都无法生成所需的输出，您可以自己编写过滤器。

AngularJS 自定义过滤器

有时，AngularJS 内置的过滤器无法满足输出格式的要求。在这种情况下，可以创建一个 AngularJS 自定义过滤器，以所需的格式返回输出。

自定义过滤器注册到模块后，其行为与内置过滤器完全相同。以下各节首先介绍标准过滤器，因为自定义过滤器使用相同的管道语法，然后再展示如何构建自定义过滤器。

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

在下面的示例中，一个字符串从调节器通过作用域对象添加到视图，但不应按原样显示。自定义过滤器 AngularJS 添加另一个字符串并显示完成的结果。

<!-- The head and library references are unchanged -->
<div ng-app="DemoApp" ng-controller="DemoController">
This tutorial is {{tutorial | Demofilter}}
</div>

<script>
var app = angular.module('DemoApp', []);

// The factory runs once; the function it returns runs on every value
app.filter('Demofilter', function() {
  return function(input) {
    return input + " Tutorial";
  };
});

app.controller('DemoController', ['$scope', function($scope) {
  $scope.tutorial = "Angular";
}]);
</script>

Code 说明

字符串“Angular”被放置在一个名为“Angular”的成员变量中。 tutorial 并附加到作用域对象。
AngularJS 提供了 filter 用于创建自定义筛选器的注册方法。“Demofilter”是它的名称，视图中引用的就是这个名称。
这是自定义过滤器的标准形状：注册函数是一个工厂返回执行相应工作的函数。该函数接收待筛选的值作为其第一个参数，并返回结果——在本例中，结果为附加了“Tutorial”的输入值。
该过滤器在视图中应用时，使用与任何内置过滤器相同的管道语法。

👍 提示： 过滤器名称通常使用小写字母或驼峰式命名法。“Demofilter”可以，但类似这样的名称则不行。 appendTutorial 阅读起来更流畅，并且避免与内置名称冲突。

输出：

单词“Tutorial”已附加到传入的字符串中。 tutorial 变量。此过滤器始终附加相同的文本，下一节将使其可配置。

如何将参数传递给自定义过滤器

上面的过滤器将要附加的文本硬编码到代码中，因此它只能执行一种操作。内置过滤器，例如： number:2 接受冒号后的参数，自定义过滤器也可以：第一个参数之后的每个参数都映射到视图中以冒号分隔的参数。

涉及三个步骤：在……之后添加参数 input 在返回的函数中，为任何可选参数提供一个默认值，以便在省略参数时过滤器仍然有效，然后将参数以冒号分隔的形式传递到视图中。

app.filter('appendText', function() {
  return function(input, suffix, separator) {
    if (!input) { return input; }        // guard against undefined
    separator = typeof separator === 'undefined' ? ' ' : separator;
    return input + separator + suffix;
  };
});

该视图随后显示如下，“教程”变为 suffix 连字符变为 separator.

{{tutorial | appendText:"Tutorial"}}          // Angular Tutorial
{{tutorial | appendText:"Tutorial":" - "}}    // Angular - Tutorial

有两个细节很容易被忽略。参数是 AngularJS 表达式，因此字符串字面量必须用引号括起来，而未加引号的单词会被读取为作用域属性。过滤器也会链式调用，每个过滤器都会接收前一个过滤器的输出： {{tutorial | appendText:"Tutorial" | uppercase}}.

⚠️ 警告： 保持过滤器的纯净性——对于相同的输入，输出保持不变，不进行任何外部更改。AngularJS 会缓存纯净过滤器，并且仅在输入发生变化时重新运行它。读取时钟或修改服务的过滤器必须进行标记。 $stateful这样就禁用了缓存，并在每个摘要周期运行过滤器，这是页面加载缓慢的常见原因。

过滤器并不局限于模板。同一个过滤器可以从以下位置调用： Java脚本如下所示。

如何在控制器中使用 $filter 服务来使用过滤器

在视图中应用过滤器是常见做法，但有时需要在控制器中使用转换后的值，例如在将数据发送到服务器之前。AngularJS 通过以下方式公开每个已注册的过滤器，包括内置过滤器和自定义过滤器： $filter 服务。注入该服务，使用过滤器名称调用它以检索过滤器函数，然后使用值和任何参数调用该函数。

app.controller('DemoController', ['$scope', '$filter',
function($scope, $filter) {
  $scope.tutorial = "Angular";

  // Built-in filters, called from JavaScript
  $scope.shouted = $filter('uppercase')($scope.tutorial);      // "ANGULAR"
  $scope.price   = $filter('currency')(20.56);                 // "$20.56"

  // A custom filter works exactly the same way
  $scope.full    = $filter('appendText')($scope.tutorial, "Tutorial");
}]);

还有一种更简短的形式：注入过滤器名称，后跟 Filter，如 uppercaseFilter直接提供过滤函数，并且可以立即调用。两种形式都解析为同一个函数，因此选择哪种形式只是风格问题。

有两种用途反复出现。第一种是准备有效负载：数据通常需要以固定的模式发送到 API，并且 $filter('date')(value, 'yyyy-MM-dd') 它无需修改绑定到表单的值即可生成结果。第二种方法是在控制器中缩小集合的宽度，而不是将其留在表单中。 orderBy 的 ng-重复表达式会在每次摘要时重新运行。

以这种方式注入的过滤器仍然会在模块上注册，因此必须声明自定义过滤器。 app.filter 在任何控制器提出请求之前 $filter 否则，AngularJS 会抛出未知提供程序错误。

调用过滤器 Java脚本与模板的一个重要区别在于：脚本的结果只计算一次并存储在作用域中，而不是像模板那样在每个摘要中都重新计算。这使得脚本对于很少更改的值来说是更快的选择，但对于必须更改的值来说则不是最佳选择。 track 用户输入。

常见问题

不。AngularJS 只支持小写和大写。要将每个单词的首字母大写，需要使用自定义过滤器来拆分字符串并重新构建，或者如果更改纯粹是视觉效果，则可以使用 CSS 文本转换规则。

该过滤器注册在与 ng-app 引导的模块不同的模块上，或者定义该过滤器的脚本在 AngularJS 加载之前运行。请将过滤器注册在同一个模块上，并首先加载库。

是的。πping 内部收藏 ng-重复在渲染之前，对项目进行筛选或排序。筛选器接收整个数组，并且必须返回一个数组。

是的。 AI 助手会根据格式化规则的简单描述生成工厂、返回函数和视图语法。请检查生成的过滤器是否能防止未定义的输入。

AI 工具将工厂重写为一个实现 PipeTransform 的类，并将每个额外的参数移到 transform 方法中。 Rev手动查看任何 $stateful 过滤器，因为不纯管道必须显式声明。

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

AngularJS 中的 Filter 是什么？

AngularJS 中的小写过滤器

Code 说明

AngularJS 中的大写过滤器

Code 说明

AngularJS 中的数字过滤器

Code 说明

AngularJS 中的货币过滤器

Code 说明

AngularJS 中的 JSON 过滤器

Code 说明

AngularJS 自定义过滤器

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

Code 说明

如何将参数传递给自定义过滤器

如何在控制器中使用 $filter 服务来使用过滤器

常见问题

总结一下这篇文章：

注册简报