AngularJS 学习笔记 03：过滤器（filter）

我不是女神ヾ 2022-05-26 04:28 210阅读 0赞

*  版本 v 1.6.10
 *  内置
    
     *  1. currency （货币处理）
     *  2. date（日期格式化）
     *  3. filter （匹配子串）
     *  4. json（格式化JSON对象）
     *  5. limitTo（限制数组、字符串长度）
     *  6. lowercase（小写）
     *  7. upper（大写）
     *  8. number（格式化数字）
     *  9. orderBy（排序）
 *  自定义过滤器
 *  控制器（controller）中使用过滤器

# 版本 v 1.6.10 #

# 内置 #

## 1. currency （货币处理） ##

*  参数缺省：默认为美元符号 `$`
 *  保留两位小数，没有则用0表示，末位四舍五入

// 语法，相当于函数，必须有返回值
    numberObj|currency[:'￥']
    
    // 实例
    {
       {
       12.348|currency:'￥'}} // => ￥12.35

## 2. date（日期格式化） ##

*  参数缺省：月份单词简写 日期, 年份 `Apr 25, 2018`
 *  可穿插字符串
 *  年份（`yyyy` /`yy`）、月份（`MM`）、日期（`dd`）
 *  星期（`EEEE` / `EEE`），返回星期单词，`EEE`单词简写形式 `Apr`
 *  时（`hh`）、分（`mm`）、秒（`ss`）

// 语法
    dateObj|date[yyyy[MM[dd[hh[mm[ss[EEEE]]]]]]]
    
    // 实例
    var now = new Date();
    new now|date:'公元 yyyy-MM-dd EEE 中国标准时间 hh:mm:ss' // => 公元 2018-04-25 Wed 中国标准时间 10:47:06

## 3. filter （匹配子串） ##

*  用来处理一个数组，然后可以过滤出含有某个子串 的元素，作为一个子数组来返回
 *  可以是字符串数组或对象数组

// 语法
    arrObj|filter[:'string'][:{key:value}
    
    // 实例
    var strArr = ['jack', 'tom', 'hannah'];
    var objArr = [
        {name: 'hannah', age: 18},
        {name: 'jack', age: 15},
        {name: 'tom', age: 15}
    ];
    strArr|filter:'a' // => ["jack","hannah"]
    objArr|filter:{age:16} // => [{"name":"jack","age":15},{"name":"tom","age":15}]

## 4. json（格式化JSON对象） ##

*  可以把一个 js 对象格式化为 json 字符串，与 JSON.stringify() 一样

// 语法
    jsonObj|json

## 5. limitTo（限制数组、字符串长度） ##

*  用来截取数组或字符串，
 *  接收一个参数用来指定截取的长度，如果参数是负值，则从数组尾部开始截取,继续返回新的数组

## 6. lowercase（小写） ##

strObj|lowercase
    
    str = 'Hello Angular';
    str|lowercase // => hello angular

## 7. upper（大写） ##

strObj|uppercase
    
    str = 'Hello Angular'
    str|uppercase // => HELLO ANGULAR

## 8. number（格式化数字） ##

*  参数缺省：默认保留三位小数，进行四舍五入
 *  如果有传参指定保留几位，就保留几位，不足的话用0表示

// 语法
    numObj|number[:number]
    
    // 实例
    var num = 12.3456789;
    num|number:4 // => 12.3457

## 9. orderBy（排序） ##

*  将一个数组中的元素进行排序，默认已 ASCII 码排序
 *  \[:rule\] 字符串，表示以该属性名称进行排序； 函数，定义排序属性；数组，表示依次按数组中的属性值进行排序
 *  \[:boolean\] 表示排序方向，默认false，true 为反序

// 语法
    arrObj|orderBy[:rule[:boolean]]
    
    // 实例
    var strArr = ['jack', 'tom', 'hannah'];
    var objArr = [
        {name: 'hannah', age: 18},
        {name: 'jack', age: 15},
        {name: 'tom', age: 15}
    ];
    strArr|orderBy // => ["hannah","jack","tom"]
    strArr|orderBy:'':true //=> ["tom","jack","hannah"]
    
    objArr|orderBy:'name'; // => [{"name":"hannah","age":18},{"name":"jack","age":15},{"name":"tom","age":15}]
    objArr|orderBy:'name':true; // => [{"name":"tom","age":15},{"name":"jack","age":15},{"name":"hannah","age":18}]

# 自定义过滤器 #

<html ng-app="App">
    <body ng-controller="Test">
    <h1>{
       {userName|welcome}}</h1> 
    </body>

// 语法
    .filter('filterName',callback)
    
    // 定义模块
    var app = angular.module('App', []);
    
    // 定义控制器
    app.cantroller('Test', ['$scope', function($scope) { 
        $scope.userName= 'hannah';
    }])
    
    // 自定义过滤器
    app.filter('welcome', function(){ 
        // 形参 name 指代调用对象，这里指向 userName
        return function(name){ 
            // 自定义处理
            return 'Hello ' + name;
        }
    })

*  也可通过配置代码块方式自定义

app.config(['$filterProvider',function($filterProvider){ 
        $filterProvider.register('welcome',function(){       
            return function(name){ 
                // 自定义处理
                return 'Hello ' + name;
            }
        }
    }])

# 控制器（controller）中使用过滤器 #

var app = angular.module("App", []);
    
    // 注入 $filter 服务
    app.controller('demoCtrl', ['$filter', function($filter){ 
    
        var now = new Data();
        var format = 'yyyy-MM-dd hh:mm:ss';
    
        // 调用filter服务下的 日期格式化 过滤器
        var date = $filter('date');
        console.log(data(now, format)); // => 2018-04-26 08:30:15
        // 或者这样写
        console.log($filter('date')(now, format)); // => 2018-04-26 08:30:15
    
    }])