一、背景介绍
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的内置过滤器有哪些?
七、参考文献
八、更多提问
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。