目录
1.背景介绍
2.知识剖析
3.常见问题
4.解决方案
5.编码实战
6.扩展思考
7.参考文献
8.更多讨论
angular是什么:AngularJS 最初由Misko Hevery 和Adam Abrons于2009年开发, 是一款优秀的前端JS框架,已经被用于Google的多款产品当中。AngularJS有着诸多特性, 最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。。
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}}
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方法。
如何使用angular中constant和$filter
html:
1.格式化货币:
{{ 12 | currency}}
{{ 12.45 | currency:'¥'}}
{{ 12.45 | currency:'CHY¥':1}}
{{ 12.55 | currency:undefined:0}}
2、格式化日期:
{{ 1304375948024 | date:'medium'}}
{{ 1304375948024 | date }}
{{ 1304375948024 | date:"yyyy-MM-dd hh:mm:ss" }}
3、过滤数组:
{{arr | filter:'s'}}
{{arr | filter:{'name':'ip'} }}
4、将对象格式化成标准的JSON格式:
{{ {name:'Jack', age: 21} | json}}
5、字符串,对象截取:
{{ "i love tank" | limitTo:6 }}
{{ "i love tank" | limitTo:-4 }}
{{ [{"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm xing"}, {"age": 44,"id": 12,"name": "test abc"} ] | limitTo:1 }}
6、大小写转换:
China has joined the {{ "wto" | uppercase }}.
We all need {{ "MONEY" | lowercase }}.
7、数值类:
{{ 1.234567 | number:1 }}
{{ 1234567 | number }}
8、对象排序:
{{arr | orderBy:'id':true }}
{{arr | orderBy:'id' }}
9、自定义:
{{1 | fMes:'compPoList':'type'}}
{{1 | provinceFilter}}
.constant('myConstant',[
{type : '0' , name : '首页banner'},
{type : '1 ', name : '找职位banner'},
{type : '2' , name : '找精英banner'},
{type : '3' , name: '行业大图'}
])
.filter("ChangeType", function (myConstant) {
return function (a) {
for(var i=0,myConstant;i++){
if(a==myConstant[i].type){
return myConstant[i].name;
}
}
}
})
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:'其他'}
],
.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": "省份"
}])
参考二:Filter用法详解