发表于: 2017-05-13 23:11:05
1 1077
angular中$filter的使用方法
小课堂【IT修真院郑州分院】
1,angularJS中constant是什么? 2,angular中$filter是什么? angularjs自身有二种,设置全局变量的方法,在加上js的设置全局变量的方法,总共有三种,分别为: Filter的基本原型( '|' 是语法规则):{{ expression | filter }} Filter可以被链式使用(即连续使用多个filter):{{ expression | filter1 | filter2 | ... }} Filter也可以指定多个参数:{{ expression | filter:argument1:argument2:... }} currencyFilter(currency): 用途:格式化货币 方法原型: function(amount, currencySymbol, fractionSize) 用法: {{ 12 | currency}} 将12格式化为货币,默认单位符号为 '$', 小数默认2位 {{ 12.45 | currency:'¥'}} 将12.45格式化为货币,使用自定义单位符号为 '¥', 小数默认2位 {{ 12.45 | currency:'CHY¥':1}} 将12.45格式化为货币,使用自定义单位符号为 'CHY¥', 小数指定1位, 会执行四舍五入操作 {{ 12.55 | currency:undefined:0}} 将12.55格式化为货币, 不改变单位符号, 小数部分将四舍五入 dateFilter(date): 方法原型: function(date, format, timezone) 用法: 使用ISO标准日期格式 {{ '2015-05-20T03:56:16.887Z' | date:"MM/dd/yyyy @ h:mma"}} 使用13位(单位:毫秒)时间戳 {{ 1432075948123 | date:"MM/dd/yyyy @ h:mma"}} filterFilter(filter): 用途:过滤数组 方法原型: function(array, expression, comparator) 用法1(参数expression使用String和参数expression使用object): Name:{{u.name}} Age:{{u.age}} Name:{{u.name}} Age:{{u.age}} 用法2(参数expression使用function): Name:{{u.name}} Age:{{u.age}} 内置的方法还有多种请参考:angular中 $filter详解 1. 在控制器中如何使用$filter以及如何自定义$filter 1. 在控制器中使用自定义的 $filter constant和value的区别 每当搜索constant时候,总会连带出现value的说明。 两者都可以作为全局变量使用,但是有两点不同: 参考一: 无上@诀1.背景介绍
常量(constant)顾名思义,angularJS中的常量,也可以说是angularJS中的全局数据。 作用:在不同的控制器(controller)中都可以使用。
过滤器(filter)人如其名,作用就是接收一个输入,通过某个规则进行处理, 然后返回处理后的结果。主要用在数据的格式化以及修改,ng内置了一些过滤器, 分别为:currency(货币)、date(日期)、filter(子串匹配)、json(格式化json对象)、limitTo(限制个数)、lowercase(小写)、 uppercase(大写)、number(数字)、orderBy(排序)。总共九种。除此之外还可以自定义过滤器,可以根据自己的需求自定义数据处里的方法。2.知识剖析
1,JS原生写法:通过var 直接设置变量。
2,用angularjs value来设置全局变量 。例:
App.value('test',{"test":"test222","test1":"test111"});
3,用angularjs constant来设置全局变量 。
App.constant('constanttest', 'this is constanttest');AngularJS内建的Filter
先在Controller中定义function: myFilter
$scope.myFilter = function (item) {
return item.age === 20;
};
3.常见问题
4.解决方案
5.编码实战
6.扩展思考
1.value不可以在config里注入,但是constant可以。
2.value可以修改,但是constant不可以修改,一般直接用constant配置一些需要经常使用的数据。
Uncaught Error: [$injector:modulerr] Failed to instantiate module mainApp due to:
Error: [$injector:unpr] Unknown provider: FBid
7.参考文献
评论