【Js-007】简述angular 中constant和$filter的用法?

大家好,我是IT修真院北京分院第27期学员,一枚正直善良的前端程序员今天跟大家分享一下前端知识点。

今天讲下深度思考中的知识点

————简述angular 中constant和$filter的用法?

1.背景介绍

angular是什么:AngularJS 最初由Misko Hevery

和Adam

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

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

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

2.知识剖析

constant

每当搜索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}}

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升序排

9、当然,我们还可以自定义filter方法。



3.常见问题

如何使用angular中constant和$filter?

4.编码实战

angular.module("myApp")

.value('val',{

})

//公司编辑常量组

.constant('con', {

  //公司人数

  companyPop:[

      {type: 0, name: '1-10人'},

      {type: 1, name: '10-20人'},

      {type: 2, name: '30-50人'},

      {type: 3, name: '50-100人'},

      {type: 4, name: '100-200人'},

      {type: 5, name: '200-500人'},

      {type: 6, name: '500-1000人'},

      {type: 7, name: '1000人以上'}

],

  //公司行业

  //团队规模:

  workGroupScale:[

      {type: 0, name: '1-10人'},

      {type: 1, name: '10-20人'},

      {type: 2, name: '30-50人'},

      {type: 3, name: '50-100人'},

      {type: 4, name: '100人以上'},

],

  //用户人数

  userPop:[

      {type:0,name:'不限'},

{type:1,name:'1W-10W'},

{type:2,name:'10W-50W'},

{type:3,name:'50W-100W'},

{type:4,name:'100W-1000W'},

      {type:5,name:'1000W以上'}

],

  //盈利情况

  earnings:[

      {type:0,name:'不限'},

      {type:1,name:'亏损'},

      {type:2,name:'平衡'},

      {type:3,name:'盈利'},

      {type:4,name:'其他'}

],

  //公司标签

  companyTag:[

      {type:0,name:'管理扁平化'},

      {type:1,name:'发展前景好'},

      {type:2,name:'成长空间大'},

      {type:3,name:'五险一金'},

      {type:4,name:'股票期权'},

      {type:5,name:'系统培训'},

      {type:6,name:'免费旅游'},

      {type:7,name:'餐补'},

      {type:8,name:'固定团建'},

      {type:9,name:'年底双薪'},

      {type:10,name:'高效自由'},

      {type:11,name:'氛围好'},

      {type:12,name:'大牛带领'},

      {type:13,name:'弹性工作制'},

      {type:14,name:'带薪假期'},

      {type:15,name:'平台广阔'},

      {type:16,name:'免费零食'}

],

//职位编辑常量

  //职业分类

  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前端工程师'}

],

  //公司职位类别

  compPoList:[

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

{type: 2, name: 'UI'},

{type: 3, name: 'QA'},

{type: 4, name: 'Android'},

{type: 5, name: 'IOS'},

{type: 6, name: 'WEB'},

{type: 7, name: 'OP'},

{type: 8, name: 'Java'},

{type: 9, name: 'NLP'},

{type: 10, name: 'DM'},

{type: 11, name: 'DL'}

],

  //职业分类二级菜单

  positionListSub:[

      {type:0,name:'初级'},

      {type:1,name:'中级'},

      {type:2,name:'高级'}

],

  //工作性质

  category:[

      {type:0,name:'全职'},

      {type:1,name:'兼职'},

      {type:2,name:'实习'}

],

  //经验

  experience:[

      {type:0,name:'无'},

      {type:1,name:'应届'},

      {type:2,name:'0-1年'},

      {type:3,name:'1-2年'},

      {type:4,name:'3-5年'},

      {type:5,name:'6-9年'},

      {type:6,name:'10年以上'}

],

  //学历

  education:[

      {type:0,name:'高中'},

      {type:1,name:'大专'},

      {type:2,name:'本科'},

      {type:3,name:'硕士'},

      {type:4,name:'博士'}

],

  //BAT从业经验

  batExperience:[

      {type:0,name:'有'},

      {type:1,name:'无'}

],

  //英语水平

  englishEx:[

      {type:0,name:'四级'},

      {type:1,name:'六级'},

      {type:2,name:'其他'}

],

  //薪资

  compensation:[

      {type:0,name:'8K以下'},

{type:1,name:'8-10K'},

{type:2,name:'10-15K'},

{type:3,name:'15-20K'},

      {type:4,name:'20K以上'}

],

isShelve:[

      {type:0,name:'上架'},

      {type:1,name:'下架'}

],

//候选人列表常量

  status:[

      {type:null,name:'全部'},

      {type:0,name:'尚未预约'},

      {type:1,name:'预约成功'},

      {type:2,name:'预约失败'},

      {type:3,name:'面试失败'},

      {type:4,name:'通过面试'}

],

statusNew:[

      {type:0,name:'尚未预约'},

      {type:1,name:'预约成功'},

      {type:2,name:'预约失败'},

      {type:3,name:'面试失败'},

      {type:4,name:'通过面试'}

],

  //人才等级

  talentLevel:[

      {type:0,name:'初级'},

      {type:1,name:'中级'},

      {type:2,name:'高级'}

],

  //是否需要推荐:

  isRecommond:[

      {type:0,name:'需要'},

      {type:1,name:'不需要'}

],

gender:[

      {type:0,name:'男'},

      {type:1,name:'女'}

],

maritalStatus:[

      {type:0,name:'未婚 '},

      {type:1,name:'已婚未育'},

      {type:2,name:'已婚已育'},

      {type:3,name:'已婚'}

],

workExperience:[

      {type:0,name:'应届'},

      {type:1,name:'1-2年'},

      {type:2,name:'3-5年'},

      {type:3,name:'6-9年'},

      {type:4,name:'10年以上'},

],

workIndustry:[

      {type:0, name: '移动互联网'},

      {type:1, name: '电子商务'},

      {type:2, name: '企业服务'},

{type:3, name: 'O2O'},

      {type:4, name: '教育'},

      {type:5, name: '金融'},

      {type:6, name: '游戏'}

],

workFinanceRound:[

      {type:0, name: '无需融资'},

      {type:1, name: '天使轮'},

      {type:2, name: 'A轮'},

      {type:3, name: 'B轮'},

      {type:4, name: 'C轮'},

      {type:5, name: 'D轮及以上'},

      {type:6, name: '上市公司'}

]

})

.constant('PROVINCE', [

        {"ProID": 1, "ProName": "北京市", "ProSort": 1, "ProRemark": "直辖市"},

        {"ProID": 2, "ProName": "天津市", "ProSort": 2, "ProRemark": "直辖市"},

        {"ProID": 3, "ProName": "河北省", "ProSort": 5, "ProRemark": "省份"}, {

"ProID": 4,

            "ProName": "山西省",

"ProSort": 6,

            "ProRemark": "省份"

        }, {"ProID": 5, "ProName": "内蒙古自治区", "ProSort": 32, "ProRemark": "自治区"}, {

"ProID": 6,

            "ProName": "辽宁省",

"ProSort": 8,

            "ProRemark": "省份"

        }, {"ProID": 7, "ProName": "吉林省", "ProSort": 9, "ProRemark": "省份"}, {

"ProID": 8,

            "ProName": "黑龙江省",

"ProSort": 10,

            "ProRemark": "省份"

        }, {"ProID": 9, "ProName": "上海市", "ProSort": 3, "ProRemark": "直辖市"}, {

"ProID": 10,

            "ProName": "江苏省",

"ProSort": 11,

            "ProRemark": "省份"

        }])


5.扩展思考

AngularJS的内置过滤器有哪些?

今天我们来了解一下AngularJS的内置过滤器

先来看看这些内置过滤器使用方法:

一个过滤器,不带参数的情况

{{expression | filter}}

一个过滤器,带参数的情况

{{expression | filter:arguments}}

一个过滤器,带多个参数的情况

{{expression | filter: arg1: arg2: ...}}

多个过滤器,不带参数的情况

{{expression | filter1 | filter2 | ...}}

下面我们分别使用以下AngularJS的内置过滤器

currency

currency允许我们设置自己的货币符号,默认情况下会采用客户端所处区域的货币符号。

可以这样使用:{{ 3600 | currency: "$¥"}}

返回结果为$¥123.00

online code点击预览

number

number过滤器将数字格式化成文本,它的参数是可选的,用来控制小数点后的截取位数

如果传入的是一个非数字字符,会返回空字符串

可以这样使用:{{ 3600 | number:2}}

返回结果为:3,600.00

online code点击预览

lowercase

lowercase将字符串转换为小写

可以这样使用:{{ "HEllo" | lowercase}}

返回结果为:hello

online code点击预览

uppercase

uppercase将字符串转换为大写

可以这样使用:{{ "HEllo" | uppercase}}

返回结果为:HELLO

online code点击预览

json

json过滤器可以将一个JSON或者JavaScript对象转换成字符串。

这个过滤器对调试相当有用

可以这样使用:{{ {"name":"dreamapple","language":"AngularJS"} | json}}

返回结果为:{ "name": "dreamapple", "language": "AngularJS" }

online code点击预览

date

date过滤器将日期过滤成你想要的格式,这个实在是很好的过滤器。

这个过滤器用法很多我这里列举几种常用的

{{ today | date: "yyyy - mm - dd"}}

结果为:2015 - 15 - 13

{{ today | date: "yyyy - mm - dd HH:mm::ss"}}

结果为:2015 - 18 - 13 20:18::38

[online code](2015 - 18 - 13 20:18::38)

还有三个内置的过滤器,但是使用稍微复杂一点,放在下一篇文章中我们大家一起探讨吧

以上所述就是本文的全部内容了,希望大家能够喜欢。

如对本文有疑问,请提交到交流社区,广大热心网友会为你解答!!点击进入社区

您可能感兴趣的文章:

AngularJS中的过滤器filter用法完全解析

详解AngularJS中自定义过滤器

AngularJS中的过滤器使用详解

使用AngularJS创建自定义的过滤器的方法

详解AngularJS过滤器的使用

AngularJS 过滤器(自带和自建)详解

angularjs过滤器--filter与ng-repeat配合有奇效

AngularJS 过滤器的简单实例

详解AngularJS验证、过滤器、指令

AngularJS过滤器filter用法分析

AngularJS常见过滤器用法实例总结

Angularjs过滤器实现动态搜索与排序功能示例

6.参考文献

参考一:angularJS constant和value

参考二:AngularJS的Filter用法详解

7.更多讨论


Q1:提问人:

A1:回答人:李浩

回答:

当我们想要创建一个服务,并且这个服务只需要返回数据时,就可以使用constant(name,value)和value(name,value),不过,它们有两个显著的区别:

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

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


Q2:提问人:

A2:回答人:李浩

回答:

在 Angular 里面,经常使用 filter 来处理一些数据的显示问题。但当 filter 要使用到异步数据时就会变得有些麻烦,试了网上很多解决方案都不行,才发现和 Angular 版本升级有关:

Angular 在 1.3.0 之后的版本提出了Stateful filters的概念,但不是很推荐使用。



Q3:提问人:

A3:回答人:李浩

回答:

先通过www.jnshu.com的JS任务6-10来学习,

边看文档,边做项目,结合着来学习效率更高



感谢阅读

github-PPT链接

https://ptteng.github.io/WEB/ppt/js-007-angular-constant-and-$filter-.html#/

腾讯视频链接

https://v.qq.com/x/page/x0529oqq7cc.html

-----------------------------------------------------------------------------------------------------------------------------------

人生苦短,想学Python。

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

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

推荐阅读更多精彩内容