大家好,我是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的内置过滤器
先来看看这些内置过滤器使用方法:
一个过滤器,不带参数的情况
{{expression | filter}}
一个过滤器,带参数的情况
{{expression | filter:arguments}}
一个过滤器,带多个参数的情况
{{expression | filter: arg1: arg2: ...}}
多个过滤器,不带参数的情况
{{expression | filter1 | filter2 | ...}}
下面我们分别使用以下AngularJS的内置过滤器
currency
currency允许我们设置自己的货币符号,默认情况下会采用客户端所处区域的货币符号。
可以这样使用:{{ 3600 | currency: "$¥"}}
返回结果为$¥123.00
number
number过滤器将数字格式化成文本,它的参数是可选的,用来控制小数点后的截取位数
如果传入的是一个非数字字符,会返回空字符串
可以这样使用:{{ 3600 | number:2}}
返回结果为:3,600.00
lowercase
lowercase将字符串转换为小写
可以这样使用:{{ "HEllo" | lowercase}}
返回结果为:hello
uppercase
uppercase将字符串转换为大写
可以这样使用:{{ "HEllo" | uppercase}}
返回结果为:HELLO
json
json过滤器可以将一个JSON或者JavaScript对象转换成字符串。
这个过滤器对调试相当有用
可以这样使用:{{ {"name":"dreamapple","language":"AngularJS"} | json}}
返回结果为:{ "name": "dreamapple", "language": "AngularJS" }
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与ng-repeat配合有奇效
6.参考文献
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。
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。