简述angular 中constant和$filter的用法

一、背景介绍

angular是什么:AngularJS最初由Misko Hevery和Adam Abrons于2009年开发,后来成为了Google公司的项目。AngularJS弥补了HTML在构建应用方面的不足,其通过使用标识符(directives)结构,来扩展Web应用中的HTML词汇,使开发者可以使用HTML来声明动态内容,从而使得Web开发和测试工作变得更加容易。

constant,可以算作angular的全局数据,想要使用的话,只需要在控制器注入即可。

$filter,angular的过滤器,如果想要在控制器里面使用,也是注入,然后调用,而html中的数据过滤,直接键入过滤器名称和对应值即可。

二、知识剖析

每当搜索constant时候,总会连带出现value的说明。

两者都可以作为全局变量使用,但是有两点不同:

1.value不可以在config里注入,但是constant可以。

2.value可以修改,但是constant不可以修改,一般直接用constant配置一些需要经常使用的数据。

下面是简单的应用例子:

angular.module('myApp', [])

.constant('apiKey', '123123123')

.value('FBid','231231231')

.controller('myController',function($scope,apiKey,FBid){

$scope.a = apiKey;

$scope.b = FBid;

})

.config(function(apiKey) {

//在这里apiKey将被赋值为123123123

//就像上面设置的那样

})

.config(function(FBid) {

//这将抛出一个错误,未知的provider: FBid

//因为在config函数内部无法访问这个值

});

filter是用来格式化数据用的

基本原型:{{expression | filter}}

多个filter连用版:{{expression | filter1 | filter2}}

传入参数版:{{expression | filter:1:2}}

三、常见问题

如何使用angular中constant和$filter?

四、解决方案

4.1 AngularJS内建了一些常用的filter:

1、格式化货币:

{{ 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格式化为货币, 不改变单位符号, 小数部分将四舍五入

2、格式化日期:

{{ 1304375948024 | date:'medium'}}//May 03, 2011 06:39:08 PM

{{ 1304375948024 | date }}//结果:May 3, 2011

{{ 1304375948024 | date:"MM/dd/yyyy @ h:mma" }}//结果:05/03/2011 @ 6:39AM

{{ 1304375948024 | date:"yyyy-MM-dd hh:mm:ss" }}//结果:2011-05-03 06:39:08

3、过滤数组:

$scope.arr = [{"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm xing"}, {"age": 44,"id": 12,"name": "test abc"} ]

{{arr | filter:'s'}}  //查找含有有s的行//上例结果:[{"age":12,"id":11,"name":"sunm xing"},{"age":44,"id":12,"name":"test abc"}]

{{arr | filter:{'name':'ip'} }}//查找name like ip的行//上例结果:[{"age":20,"id":10,"name":"iphone"}]

4、将对象格式化成标准的JSON格式:

{{ {name:'Jack', age: 21} | json}}

5、字符串,对象截取:

{{ "i love tank" | limitTo:6 }}//结果:i love

{{ "i love tank" | limitTo:-4 }}//结果:tank

{{ [{"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm xing"}, {"age": 44,"id": 12,"name": "test abc"} ] | limitTo:1 }}//结果:[{"age":20,"id":10,"name":"iphone"}]

6、大小写转换:

China has joined the {{ "wto" | uppercase }}.

We all need {{ "MONEY" | lowercase }}.

7、数值类:

{{ 1.234567 | number:1 }}  //结果:1.2

{{ 1234567 | number }}    //结果:1,234,567

8、对象排序:

$scope.arr = [{"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm xing"}, {"age": 44,"id": 12,"name": "test abc"} ]

{{arr | orderBy:'id':true }}//根id降序排

{{arr | orderBy:'id' }}//根据id升序排

4.2 自定义filter方法

我们来自定义选择省份和职位

HTML代码:

{{1 | provinceFilter}}

{{6 | fMes:'positionList':'type'}}

app.js:

angular.module('myApp',[])

//数组

      .controller('personCtrl',function($scope){

            $scope.arr=[

                  {"age":20,"id":10,"name":"iphone"},

                  {"age":12,"id":11,"name":"sunm xing"},

                  {"age":44,"id":12,"name":"test abc"}

                  ]})

//自定义选择省份

.filter('provinceFilter',function(PROVINCE){//省

          return function(id){

                  if(id!=undefined&&id!=''){

                  var  name;

                  angular.forEach(PROVINCE,function(data){

                         if(data.ProID==id){

                               name=data.ProName;

                           }

                    });

return  name;

}

}

})

//自定义选择职位

.filter('fMes',function(con){

        return function(input,field,str){

        if(input>=0) {//input != undefined &&

               var name;

               var aMes=con[field];

               angular.forEach(aMes,function(data){

                     if(data[str]==input){

                            name=data.name;

                     }

               });

return name;

}else{console.log('false');}

}

});

constant.js

angular.module("myApp")

         .value('val',{

     })

     //公司编辑常量组

    .constant('con',{

//职业分类

             positionList:[

                   {type:0,name:'ui设计师'},

                   {type:1,name:'运维工程师'},

                   {type:2,name:'产品'},

                   {type:3,name:'Java工程师'},

                   {type:4,name:'IOS工程师'},

                   {type:5,name:'Android工程师'},

                   {type:6,name:'Web前端工程师'}

         ]

})

显示的结果是:Web前端工程师,改变type值,显示相应的职位。

五、编码实战

六、拓展思考

AngularJS的内置过滤器有哪些?

七、参考文献

参考一:angularJS constant和value

参考二:AngularJS的Filter用法详解

八、更多提问

1、constant函数取值,和直接用常量名有什么区别

答:大多数情况直接用常量名,但是在angular中,使用constant的字段约定与后台进行数据交互的时候很方便,结构更加清晰。constant()函数和直接使用常量名输出的效果是一样的,但函数可以动态的输出不同的常量,在使用上要灵活、方便。

2、filter怎么去掉时间的  秒

答:{{date | date : 'yyyy-MM-dd hh:mm:ss EEEE'}}

参数用来指定所要的格式,y M d h m s E 分别表示 年 月 日 时 分 秒 星期,你可以自由组合它们

3、什么情况下使用filter

答:常用的就是一个date的格式转换,表格中进行排序、还有大量的一些约定字段,使用自定义的filter。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,293评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,604评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,958评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,729评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,719评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,630评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,000评论 3 397
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,665评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,909评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,646评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,726评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,400评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,986评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,959评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,197评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,996评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,481评论 2 342

推荐阅读更多精彩内容