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

过滤器

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等自由组合
    如：
    

    {{now | date:"yyyy-MM-dd HH:mm:ss"}}

• 字符串大小写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

过滤器在视图层的用法

{{表达式 | 过滤器1名称 : 参数a：参数b | 过滤器2名称 : 参数c : 参数d | … }}

<h1>{{123.3445 | number:3 | currency:'￥'}}h1>
<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,"￥");
}]);