1. AngularJS过滤器(Filter)使用方法
AngularJS中过滤器(Filter)主要功能是格式化数据。
AngularJS过滤器使用方法有3种:
◊ 在表达式{ {}}中使用
◊ 在指令中使用
◊ 在Controller或Service、Factory、Provider等服务中使用
1.1 表达式中使用过滤器
过滤器使用管道符(|)添加到表达式或指令中。
语法:
{ { expression | filter }}
可以同时使用多个过滤器,多个过滤器之间管道符(|)分隔。
{ { expression | filter1 | filter2 | ... | filterN }}
过滤器可以带参数,参数使用冒号(:)隔开。
{ { expression | filter1:param1 | filter2:param2 | ... | filterN:paramN }}
1.2 指令中使用过滤器
过滤器使用管道符(|)添加到表达式或指令中。
- { { item.ProductName }} { { item.Quantity }}
降序:
1.3 在Controller或AngularJS服务中使用过滤器
在Controller、Service、Factory、Provider等服务中使用过滤器方式:依赖注入。
示例:
{ { unitprice }}
currencyFilter为AngularJS内置过滤器,用于将数字转化为货币形式。
AngularJS提供$filter服务,可以调用所有过滤器。
{ { unitprice }} // $10,000.00 { { now }} // 2017-06-05 23:08:02
$scope.unitprice = $filter("currency")(10000, "¥"); // ¥10,000.00
$filter("name")根据名称获取对应的过滤器,把数据作为参数传递给过滤器处理。
2. AngularJS内置过滤器
2.1 filter
filter过滤器用来处理数组,过滤包含某个子串的元素,过滤后的元素作为子数组返回。可以是字符串数组或对象数组。
对象数组,则匹配属性的值。可以接收一个参数,用来定义子元素的匹配规则。
示例:
商品名称 数量 单价 { { item.ProductName }} { { item.Quantity }} { { item.UnitPrice }}
商品名称 数量 单价 { { item.ProductName }} { { item.Quantity }} { { item.UnitPrice | currency }}
2.2 currency
currency货币格式化,默认为$,可以参数设置其他符号及精度。
示例:
商品名称 数量 单价 { { item.ProductName }} { { item.Quantity }} { { item.UnitPrice | currency }}
设置其他符号:
{ { 1000 | currency: "¥" }} // ¥1,000.00
设置精度:
{ { 1000.75 | currency: "¥": 1 }} // ¥1,000.8
2.3 number
number过滤器用于将数字格式化为文本,可以对数字设置精度。默认保留的小数位数小于或等于3。
{ { 10000 | number }} // 10,000
{ { 3.1415926 | number }} // 3.142
{ { 3.1415926 | number: 2 }} // 3.14
2.4 lowercase & uppercase
lowercase过滤器:将字符串中的大写字母全部转换为小写。
{ { "Hello AngularJS" | lowercase }} // hello angularjs
uppercase过滤器:将字符串中的小写字母全部转换为大写。
{ { "Hello AngularJS" | uppercase }} // HELLO ANGULARJS
2.5 date
{ { now | date }} { { now | date: "yyyy-MM-dd" }} { { now | date: "yyyy-MM-dd HH:mm:ss" }} { { now | date: "yyyy年MM月dd日" }}
2.5 limitTo
limitTo过滤器:用来截取数组或字符串,参数用来指定截图长度。如果参数是负值,则从尾部开始截取。
商品名称 数量 单价 { { item.ProductName }} { { item.Quantity }} { { item.UnitPrice | currency }}
{ { "Hello" | limitTo: 2 }} // He
2.6 orderBy
orderBy过滤器:用来将一个数组中的元素进行排序,可以设置参数指定排序规则。
参数:字符串,表示按照该属性名进行排序。
参数:数组,表示依次按照数组中的属性进行排序。
示例:
商品名称 数量 单价 { { item.ProductName }} { { item.Quantity }} { { item.UnitPrice | currency }}
orderBy过滤器默认为升序。
设置降序两种方式:
// 排序属性前加减号(-)
3. 自定义过滤器
AngularJS自定义过滤器,调用模块实例的filter()方法。
3.1 自定义不带参数过滤器
filter()使用方法:
var app = angular.module("app", []);app.filter("filterName", function() { return function(input) { // 逻辑处理 ... return result; };});
filter()方法两个参数:
第一个参数:过滤器名称,
第二个参数:过滤器定义方法,必须返回一个用于处理过滤器逻辑的方法。返回的方法可接受一个参数:过滤器的输出数据。
示例:
{ { amount | toRMB }}
注:toRMB数字转大写方法存在Bug,不能完全正确转换。
使用$filter调用自定义过滤器:
app.controller("MainCtrl", ["$scope", "$filter", function ($scope, $filter) { $scope.amount = $filter("toRMB") (1234.53);}]);
3.2 自定义带参数的过滤器
语法:
app.filter("filterName", function() { return function(input, param1, param2, ... ,paramN) { // 逻辑处理 ... return result; };});
其中:param1,param2,...,paramN为过滤器使用时传入的参数。
示例:
单价:
商品名称 数量 单价 { { item.ProductName }} { { item.Quantity }} { { item.UnitPrice | currency }}
4. 第三方过滤器插件
4.1 angular-filter
官网:
npm安装:
npm install angular-filter
示例:
商品名称 数量 单价 { { item.ProductName }} { { item.Quantity }} { { item.UnitPrice | currency }}
其中,引入插件:
在自定义模块中添加angular.filter注入:
var app = angular.module("app", ["angular.filter"]);
angular-filter部分过滤器示例:
集合元素
unique:从数组或对象中删除重复项。
商品名称 数量 单价 { { item.ProductName }} { { item.Quantity }} { { item.UnitPrice | currency }}