在Angular中，可以用过滤器来声明应该如何变换数据格式，然后再显示给用户，你只要在模板中使用一个插值变量即可。使用过滤器的语法是：
{{ expression | filterName : parameter1 : ...parameterN }}
这里的表达式可以是任意的Angular表达式，fileName是你需要使用的过滤器名称，过滤器的多个参数之间使用冒号分隔。这些参数自身也可以是任何合法的Angular表达式。
Angular内置了很多过滤器，例如：
{{12.9 | currency}
以上这段代码将会显示如下结果：
$12.90
把插值变量声明在视图里面（而不是在控制器或者模型里面），因为数字前面的美元符号对人类来说很重要，而对我们用来处理数据的逻辑来说是没有意义的。
Angular内置的其他过滤器还有date、number、uppercase等。
在绑定的过程中，可以用管道符号把过滤器连接起来。例如，对于上面的这个例子，我们可以加一个number过滤器来把小数点后面的数值格式化掉，number过滤器会把数值作为参数传递给round函数。所以：
{{12.9 | currency | number:0}}
将会显示成：
$13
在实际开发过程中，不必受限于内置的过滤器，自已编写过滤器也非常简单。例如，为标题文字创建首字母大写的字符串，可以像下面这样开发Filter：
<html>
<head>
<title>Filter实例</title>
</head>
<body ng-app='HomeModule' ng-controller='HomeController'>
<h1>{{pageHeading | titleCase}}</h1>
<script src="lib/angular/angular.js"></script>
<script>
var myApp=angular.module('HomeModule',[]);
myApp.controller('HomeController', function($scope) {
$scope.pageHeading = 'behold the majesty of your page title';
});
myApp.filter('titleCase', function() {
var titleCaseFilter = function(input) {
var words = input.split(' ');
for(var i=0;i<words.length;i++) {
words[i] = words[i].charAt(0).toUpperCase() + words[i].slice(1);
}
return words.join(' ');
};
return titleCaseFilter;
});
</script>
</body>
</html>
运行效果：
资料来源：《用AngularJS开发下一代Web应用》
相关推荐
在AngularJS应用中，filter常被用来格式化数据、筛选数据或改变数据的显示方式，极大地提高了代码的可读性和用户体验。下面将详细介绍一些常用的AngularJS过滤器及其用法。 1. `lowercase` 和 `uppercase` 过滤器：...
**AngularJS过滤器filter详解** AngularJS是一款强大的前端JavaScript框架，用于构建动态Web应用程序。过滤器是AngularJS中一个至关重要的特性，它允许我们在数据展示时进行格式化和转换，从而提升用户体验。过滤器...
过滤器的主要用途是格式化和转换数据，以便在用户界面中呈现。例如，我们可以用过滤器来改变数字格式（如货币或百分比）、日期格式、字符串截取等。在实际应用中，当需要根据不同的场景展示相同数据的不同形式时，...
AngularJS的Filter过滤器是其数据绑定功能的重要组成部分，它允许开发者对数据进行转换和格式化，以便在视图中展示。以下是对AngularJS Filter过滤器的详细解析： 1. **Lowercase和Uppercase**： 这两个过滤器分别...
过滤器是AngularJS中的另一种重要工具，它用于对数据进行转换和格式化，以便在视图中展示。过滤器通常在双大括号`{{ }}`内的表达式后面使用管道符`|`来调用，可以接受参数以进一步定制过滤效果。例如： ```html {{ ...
它可以在模板表达式中使用，也可以被应用到管道符中以格式化数据。在本详解中，我们将了解如何在AngularJS中使用过滤器来实现不同的数据展示效果。 1. 小写过滤器 小写过滤器（lowercase）通常用于将字符串转换为...
AngularJS中过滤器的作用是格式化需要展示给用户的数据。在AngularJS的HTML模板绑定中，我们通过在绑定符号{{}}内使用|符号调用过滤器。例如，{{value|lowercase}}这样的表达式可以将值转换成小写。除了在HTML模板中...
在AngularJS中，过滤器（Filters）是一种强大的工具，用于转换和格式化数据，以便在视图中以更易读的方式展示。它们可以应用于数组、字符串、数字等，以实现如日期格式化、货币转换、搜索过滤等多种功能。在本项目...
AngularJS过滤器不仅可以用于排序，还可以用于数据的搜索和筛选。例如，结合“ng-model”和“ng-repeat”指令，可以实现一个数据搜索框，允许用户输入搜索关键词，然后通过“filter”过滤器来动态筛选显示的数据。 ...
例如，使用number过滤器格式化数字，{{123.456789|number:2}}将会把数字格式化为保留两位小数的形式。 内置过滤器的使用示例包括： - uppercase和lowercase：用于大小写转换。 - json：用于格式化对象为JSON字符串...
详解 AngularJS 过滤器的用法 AngularJS 过滤器是用来格式化需要展现给用户的数据的强大工具。...AngularJS 过滤器是一个非常强大且有用的工具，可以帮助开发者快速地格式化数据，并将其展现给用户。
AngularJS是Google推出的前端框架，其中过滤器(filter)是一种重要的功能，用于格式化数据，使其符合用户界面的需要。过滤器可以在很多场景下使用，比如数据展示时的格式化、对数组元素进行排序等。AngularJS内置了九...
尽管在其他页面上Date过滤器表现正常，但在这个特定页面，由于从后端传递过来的时间数据是字符串格式，而不是时间戳，所以过滤器无法正确解析和格式化这个日期。 解决这个问题的方法主要有两个方向： 1. **前端...
过滤器不仅可以过滤数据，还可以格式化数据。如果需要传递参数给过滤器，可以在过滤器名称后添加冒号和参数，多个参数之间用冒号分隔，例如：{{1234|number:2}}会将1234格式化为带有两位小数的数字1,234.00。 在...
**过滤器**用于格式化或转换数据，它们可以在视图中使用，也可以在表达式中使用。例如，`currency`过滤器用于将数字格式化为货币，`date`过滤器用于格式化日期和时间，`limitTo`用于截取字符串或数组的一部分。 **...
过滤器用于格式化数据，比如日期、货币、数组排序等。在视图中，我们可以通过管道符号（|）来使用过滤器，如 `{{ expression | filter1 : argument1 | filter2 }}`。过滤器可以链式调用，为数据展示提供了极大的灵活...
总之，AngularJS过滤器是数据呈现和处理的关键工具，它们帮助开发者将原始数据转化为适合用户阅读的形式，同时也方便在业务逻辑中进行数据筛选和转换。熟练掌握过滤器的使用，能极大地提升AngularJS应用的用户体验和...
总的来说，AngularJS的`$filter`服务为我们提供了一种在控制器中方便地处理和格式化数据的方法。无论是格式化日期、时间还是其他类型的数据，都可以灵活地在业务逻辑中使用过滤器，使数据呈现更加友好和可读。通过...
通过上述内容，我们可以了解到AngularJS过滤器的重要性以及如何在实际开发中使用它们。过滤器不仅使得数据展示变得灵活多样，而且能够保持代码的整洁和可维护性，是前端开发中非常实用的一个工具。