一唧领、背景介紹
angular是什么：AngularJS最初由Misko Hevery和Adam Abrons于2009年開發(fā)双仍，后來成為了Google公司的項(xiàng)目囚枪。AngularJS彌補(bǔ)了HTML在構(gòu)建應(yīng)用方面的不足场钉，其通過使用標(biāo)識符（directives）結(jié)構(gòu)押框，來擴(kuò)展Web應(yīng)用中的HTML詞匯俐银，使開發(fā)者可以使用HTML來聲明動態(tài)內(nèi)容尿背，從而使得Web開發(fā)和測試工作變得更加容易。
constant捶惜，可以算作angular的全局?jǐn)?shù)據(jù)田藐，想要使用的話，只需要在控制器注入即可售躁。
$filter坞淮，angular的過濾器，如果想要在控制器里面使用陪捷，也是注入回窘，然后調(diào)用泊业，而html中的數(shù)據(jù)過濾系吭，直接鍵入過濾器名稱和對應(yīng)值即可。
二镀脂、知識剖析
每當(dāng)搜索constant時(shí)候苍碟，總會連帶出現(xiàn)value的說明酒觅。
兩者都可以作為全局變量使用，但是有兩點(diǎn)不同：
1.value不可以在config里注入微峰，但是constant可以舷丹。
2.value可以修改，但是constant不可以修改蜓肆，一般直接用constant配置一些需要經(jīng)常使用的數(shù)據(jù)颜凯。
下面是簡單的應(yīng)用例子：
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
//就像上面設(shè)置的那樣
})
.config(function(FBid) {
//這將拋出一個(gè)錯(cuò)誤，未知的provider: FBid
//因?yàn)樵赾onfig函數(shù)內(nèi)部無法訪問這個(gè)值
});
filter是用來格式化數(shù)據(jù)用的
基本原型：{{expression | filter}}
多個(gè)filter連用版：{{expression | filter1 | filter2}}
傳入?yún)?shù)版：{{expression | filter:1:2}}
三仗扬、常見問題
如何使用angular中constant和$filter症概？
四、解決方案
4.1 AngularJS內(nèi)建了一些常用的filter：
1早芭、格式化貨幣：
{{ 12 | currency}}? //將12格式化為貨幣彼城，默認(rèn)單位符號為'$',小數(shù)默認(rèn)2位
{{ 12.45 | currency:'￥'}} //將12.45格式化為貨幣，使用自定義單位符號為'￥',小數(shù)默認(rèn)2位
{{ 12.45 | currency:'CHY￥':1}} //將12.45格式化為貨幣，使用自定義單位符號為'CHY￥',小數(shù)指定1位,會執(zhí)行四舍五入操作
{{ 12.55 | currency:undefined:0}} //將12.55格式化為貨幣募壕， 不改變單位符號调炬， 小數(shù)部分將四舍五入
2、格式化日期：
{{ 1304375948024 | date:'medium'}}//May 03, 2011 06:39:08 PM
{{ 1304375948024 | date }}//結(jié)果：May 3, 2011
{{ 1304375948024 | date:"MM/dd/yyyy @ h:mma" }}//結(jié)果：05/03/2011 @ 6:39AM
{{ 1304375948024 | date:"yyyy-MM-dd hh:mm:ss" }}//結(jié)果：2011-05-03 06:39:08
3司抱、過濾數(shù)組：
$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的行//上例結(jié)果：[{"age":12,"id":11,"name":"sunm xing"},{"age":44,"id":12,"name":"test abc"}]
{{arr | filter:{'name':'ip'} }}//查找name like ip的行//上例結(jié)果:[{"age":20,"id":10,"name":"iphone"}]
4筐眷、將對象格式化成標(biāo)準(zhǔn)的JSON格式：
{{ {name:'Jack', age: 21} | json}}
5、字符串习柠，對象截仍纫ァ：
{{ "i love tank" | limitTo:6 }}//結(jié)果：i love
{{ "i love tank" | limitTo:-4 }}//結(jié)果：tank
{{ [{"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm xing"}, {"age": 44,"id": 12,"name": "test abc"} ] | limitTo:1 }}//結(jié)果：[{"age":20,"id":10,"name":"iphone"}]
6、大小寫轉(zhuǎn)換：
China has joined the {{ "wto" | uppercase }}.
We all need {{ "MONEY" | lowercase }}.
7资溃、數(shù)值類：
{{ 1.234567 | number:1 }}? //結(jié)果：1.2
{{ 1234567 | number }}? ? //結(jié)果：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' }}//根據(jù)id升序排
4.2 自定義filter方法
我們來自定義選擇省份和職位
HTML代碼：
{{1 | provinceFilter}}
{{6 | fMes:'positionList':'type'}}
app.js:
angular.module('myApp',[])
//數(shù)組
? ? ? .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',{
//職業(yè)分類
? ? ? ? ? ? ?positionList:[
? ? ? ? ? ? ? ? ? ?{type:0,name:'ui設(shè)計(jì)師'},
? ? ? ? ? ? ? ? ? ?{type:1,name:'運(yùn)維工程師'},
? ? ? ? ? ? ? ? ? ?{type:2,name:'產(chǎn)品'},
? ? ? ? ? ? ? ? ? ?{type:3,name:'Java工程師'},
? ? ? ? ? ? ? ? ? ?{type:4,name:'IOS工程師'},
? ? ? ? ? ? ? ? ? ?{type:5,name:'Android工程師'},
? ? ? ? ? ? ? ? ? ?{type:6,name:'Web前端工程師'}
? ? ? ? ?]
})
顯示的結(jié)果是：Web前端工程師，改變type值溶锭，顯示相應(yīng)的職位宝恶。
五、編碼實(shí)戰(zhàn)
六趴捅、拓展思考
AngularJS的內(nèi)置過濾器有哪些垫毙？
七、參考文獻(xiàn)
八拱绑、更多提問
1综芥、constant函數(shù)取值，和直接用常量名有什么區(qū)別
答：大多數(shù)情況直接用常量名猎拨，但是在angular中膀藐，使用constant的字段約定與后臺進(jìn)行數(shù)據(jù)交互的時(shí)候很方便，結(jié)構(gòu)更加清晰红省。constant()函數(shù)和直接使用常量名輸出的效果是一樣的额各，但函數(shù)可以動態(tài)的輸出不同的常量，在使用上要靈活吧恃、方便虾啦。
2、filter怎么去掉時(shí)間的??秒
答：{{date | date : 'yyyy-MM-dd hh:mm:ss EEEE'}}
參數(shù)用來指定所要的格式痕寓，y M d h m s E 分別表示 年 月 日 時(shí) 分 秒 星期缸逃，你可以自由組合它們
3、什么情況下使用filter
答：常用的就是一個(gè)date的格式轉(zhuǎn)換厂抽，表格中進(jìn)行排序、還有大量的一些約定字段丁眼，使用自定義的filter筷凤。
