小人儿的笔记（AngularJS）--04

最新推荐文章于 2025-08-07 08:15:00 发布

JtUnion

最新推荐文章于 2025-08-07 08:15:00 发布

阅读量420

点赞数

CC 4.0 BY-SA版权

分类专栏： web 文章标签： angular filter

本文链接：https://blog.youkuaiyun.com/JtUnion/article/details/54892770

web 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了AngularJS中过滤器的使用方法，包括内置的9种过滤器：货币、数字、日期、字符串大小写转换、个数限制、JSON格式化、数据筛选及排序等，并提供了在视图和控制器中的应用实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

过滤器

1.用于将数据格式化后展现；
2.AngularJS内置多个过滤器，并支持自定义；
3.可以用在视图模板(templates)、指令（directives）、控制器(controllers)或者服务(services)中；
4.在视图模板或指令中使用运算符“|”添加过滤器；
5.在控制器或服务中使用$filter；

Angular共内置了9种过滤器，分别是

货币currency :
- 用于以货币形式显示数据，默认以$为货币符号，保留小数点后2位，可以指定货币符号和保留位数，参数顺序不能颠倒，自动四舍五入；
  如：{{num | currency:'￥':3}}
数字number :
- 用于保留小数位数，自动四舍五入；
日期date：
- Date类型数据默认输出为与基准时间相差毫秒数
- 预定义格式：short、medium、shortDate、 mediumDate（默认格式）、longDate、fullDate、shortTime、mediumTime
- 自定义格式：使用字母y、M、d、h/H、m、s、E等自由组合
  如：
  <h1>{{now | date:"yyyy-MM-dd HH:mm:ss"}}</h1>
字符串大小写lowercase和uppercase
个数限制limitTo
- 用于截取部分字符串或数组，参数为正数表示截取开始部分，负数表示截取结尾部分；当参数超出数据长度，则返回原始数据；
- 当有两个参数时，第一个代表截取的长度，第二个代表索引；
  如：

    <h1>limitTo:2:3 :{{str | limitTo:5:3}}</h1>
    <h1>limitTo:-2:-3 :{{str | limitTo:-5:-3}}</h1>

JSON格式化json
- 用于将JSON对象或JavaScript对象转换为JSON格式字符串；
数据筛选filter
数据排序orderBy

过滤器在视图层的用法

<!--特别要注意过滤器的顺序！-->
<h1>{{123.3445 | number:3 | currency:'￥'}}</h1><!--123.35-->
<h1>{{123.3445 | currency:'￥':3 | number :2}}</h1><!--代码出错，已经不再是数字了，不显示 -->

过滤器在控制器层的用法

例：

<div ng-controller="FilterController">
    <h2>{{num}}</h2>
    <h2>{{str}}</h2>    
</div>

法1：

angular.module('myApp', [])
.controller(
//在定义控制器时，将过滤器注入，格式为：过滤器名Filter；
//注入的过滤器作为函数使用，第一个参数为要过滤的数据，后面依次为过滤器所需参数；
    'FilterController', ['$scope','currencyFilter','lowercaseFilter',
     function($scope,cf,lcf){
        $scope.str=lcf("Hello World");
        $scope.num=cf(123.456789,'￥',3);
}])

法2：

.controller(
//当需要注入的过滤器较多时，也可以注入$filter服务，然后使用：$ft(“过滤器名”)(参数列表)；如此处的str需要经过两层过滤。
    'FilterController', ['$scope','$filter',
     function($scope,$filter){
        var tmp=$filter("number")(123.3445,3);
        $scope.str=$filter("currency")(tmp,"￥");
}]);