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

最新推荐文章于 2022-01-14 17:01:08 发布

凝弧

最新推荐文章于 2022-01-14 17:01:08 发布

阅读量210

点赞数

分类专栏： Frame for data

本文链接：https://blog.csdn.net/wildye/article/details/80075486

版权

Frame for data 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

版本 v 1.6.10
内置
自定义过滤器
控制器（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（限制数组、字符串长度）

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

// 语法
strObj|limitTo[:number]
arrObj|limitTo[:number]

// 实例
str = 'hello Angular';
str|limitTo:5 // => hello
str|limitTo:-7 // => Angular


arr = ['jack', 'tom', 'hannah'];
arr|limitTo:1 // => ["jack"]
arr|limitTo:-1 // => ["hannah"]
arr|limitTo:-2 // => ["tom","hannah"]

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> <!-- Hello hannah -->
</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

}])

凝弧

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
AngularJS 学习笔记 03：过滤器（filter）

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

扫一扫