AngularJS 是一款流行的前端框架，它的一个重要特性就是数据绑定。在 AngularJS 中，我们可以使用过滤器来对数据进行处理和格式化，使其满足我们的需求。$filter 是 AngularJS 中内置的一个服务，它提供了很多常用的过滤器，比如日期格式化、字符串截取、数组排序等等。本文将详细介绍 $filter 过滤器的使用方法和常见应用场景。
使用方法
在 AngularJS 中，我们可以使用 $filter 服务来调用内置的过滤器。$filter 服务的使用方法如下：
app.controller('myCtrl', function($scope, $filter) {
$scope.myDate = new Date();
$scope.formattedDate = $filter('date')($scope.myDate, 'yyyy-MM-dd');
});在上面的代码中，我们通过注入 $filter 服务来调用内置的 date 过滤器。date 过滤器的作用是将日期对象格式化成指定的字符串格式。在调用 $filter 服务时，我们需要传入两个参数：过滤器名称和待处理的数据。在本例中，我们将 $scope.myDate 作为待处理的数据，将 'yyyy-MM-dd' 作为格式化字符串。经过 date 过滤器的处理，我们将得到一个格式化后的日期字符串。
常见应用场景
1. 日期格式化
日期是应用中常用的数据类型之一，而日期的格式化是一个常见的需求。在 AngularJS 中，我们可以使用 date 过滤器来将日期对象格式化成指定的字符串格式。date 过滤器的使用方法如下：
<p>{{ myDate | date:'yyyy-MM-dd' }}</p>在上面的代码中，我们使用了 date 过滤器将 myDate 格式化成 'yyyy-MM-dd' 的日期字符串。除了 'yyyy-MM-dd'，date 过滤器还支持很多其他的格式化字符串，比如 'yyyy-MM-dd HH:mm:ss'、'MMM d, y h:mm:ss a' 等等。具体的格式化字符串可以参考 AngularJS 的官方文档。
2. 字符串截取
有时我们需要对字符串进行截取，比如将一个较长的标题截取成一定长度以便在页面上显示。在 AngularJS 中，我们可以使用 limitTo 过滤器来实现字符串的截取。limitTo 过滤器的使用方法如下：
<p>{{ title | limitTo:20 }}</p>在上面的代码中，我们使用了 limitTo 过滤器将 title 截取成长度为 20 的字符串。如果 title 的长度小于 20，那么 limitTo 过滤器不会对其进行截取。如果我们想从字符串的末尾开始截取，可以使用负数作为 limitTo 的参数，比如：
<p>{{ title | limitTo:-20 }}</p>在上面的代码中，我们使用了 limitTo 过滤器将 title 从末尾开始截取成长度为 20 的字符串。
3. 数组排序
在 AngularJS 中，我们可以使用 orderBy 过滤器对数组进行排序。orderBy 过滤器的使用方法如下：
<ul>
<li ng-repeat="item in items | orderBy:'name'">{{ item.name }}</li>
</ul>在上面的代码中，我们使用了 orderBy 过滤器将 items 数组按照 name 属性进行升序排序。如果我们想进行降序排序，可以在 name 前面加上 '-'，比如：
<ul>
<li ng-repeat="item in items | orderBy:'-name'">{{ item.name }}</li>
</ul>在上面的代码中，我们使用了 orderBy 过滤器将 items 数组按照 name 属性进行降序排序。
总结
$filter 过滤器是 AngularJS 中非常实用的一个特性，它可以让我们对数据进行处理和格式化，使其满足我们的需求。在本文中，我们介绍了 $filter 过滤器的使用方法和常见应用场景，包括日期格式化、字符串截取、数组排序等等。希望本文能够对大家学习和使用 AngularJS 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65fce17dd10417a22283f0e5