大家好，我是IT修真院鄭州分院王姣妍狱意，一枚正直就乓、純潔、善良的web程序員涤姊。
今天給大家分享一下，修真院官網(wǎng) js任務(wù)中可能會(huì)使用到的知識(shí)點(diǎn)：
angularJS中的constant和$filter的用法
一嗤放、背景介紹
angular是什么：AngularJS 最初由Misko Hevery 和Adam Abrons于2009年開(kāi)發(fā)思喊， 是一款優(yōu)秀的前端JS框架，已經(jīng)被用于Google的多款產(chǎn)品當(dāng)中次酌。AngularJS有著諸多特性恨课， 最為核心的是：MVC舆乔、模塊化、自動(dòng)化雙向數(shù)據(jù)綁定庄呈、語(yǔ)義化標(biāo)簽蜕煌、依賴(lài)注入等等派阱。诬留。
constant，可以算作angular的全局常量贫母，使用的時(shí)候只需要在控制器注入即可文兑。
$filter，angular的過(guò)濾器腺劣，如果想要在控制器里面使用绿贞，也是注入，然后調(diào)用橘原，而html中的數(shù)據(jù)過(guò)濾籍铁，直接鍵入過(guò)濾器名稱(chēng)和對(duì)應(yīng)值即可。
二趾断、知識(shí)剖析
constant
每當(dāng)搜索constant時(shí)候拒名，總會(huì)連帶出現(xiàn)value的說(shuō)明。
兩者都可以作為全局變量使用芋酌，但是有兩點(diǎn)不同：
1.value不可以在config里注入增显，但是constant可以。
2.value可以修改脐帝，但是constant不可以修改同云，一般直接用constant配置一些需要經(jīng)常使用的數(shù)據(jù)。
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)部無(wú)法訪(fǎng)問(wèn)這個(gè)值
});
filter是用來(lái)格式化數(shù)據(jù)用的
基本原型
{{expression | filter}}
多個(gè)filter連用版
{{expression | filter1 | filter2}}
傳入?yún)?shù)版
{{expression | filter:1:2}}
AngularJS內(nèi)建了一些常用的filter：
1炸站、格式化貨幣：
{{ 12 | currency}} //將12格式化為貨幣，默認(rèn)單位符號(hào)為 '$', 小數(shù)默認(rèn)2位
2疚顷、格式化日期
{{ 1304375948024 | date:"yyyy-MM-dd hh:mm:ss" }}//結(jié)果：2011-05-03 06:39:08
3旱易、過(guò)濾數(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的對(duì)象
4、將對(duì)象格式化成標(biāo)準(zhǔn)的JSON格式：
{{ {name:'Jack', age: 21} | json}}? //{"name":"Jack","age":"21"}
5荡含、字符串咒唆，對(duì)象截取：
{{ "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释液、大小寫(xiě)轉(zhuǎn)換：
China has joined the {{ "wto" | uppercase }}.
We all need {{ "MONEY" | lowercase }}.
7全释、數(shù)值類(lèi)：
{{ 1.234567 | number:1 }} //結(jié)果：1.2
{{ 1234567 | number }} //結(jié)果：1,234,567
8、對(duì)象排序：
$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升序排
9误债、自定義filter方法浸船。
三妄迁、常見(jiàn)問(wèn)題
如何使用angular中constant和$filter
四、解決方案
html:
{{ type | ChangeType }}
js:
angular.module('App',[])
.controller('myCtr',function ($scope) {
$scope.type=2
? ? })
.constant('myConstant',[
{type :'0' ,name :'首頁(yè)banner'},
{type :'1 ',name :'找職位banner'},
{type :'2' ,name :'找精英banner'},
{type :'3' ,name:'行業(yè)大圖'}
])
.filter("ChangeType",function (myConstant) {
return function (a) {
for(var i=0;i
if(a==myConstant[i].type){
return myConstant[i].name;
}
}
}
})
想要顯示什么內(nèi)容李命，只需改變$scope.type的數(shù)字就可以了
五登淘、編碼實(shí)戰(zhàn)
六、擴(kuò)展思考
AngularJS的內(nèi)置過(guò)濾器有哪些封字？
七黔州、參考文獻(xiàn)
參考二：Filter用法詳解
八、更多討論
1阔籽、constant函數(shù)取值流妻，和直接用常量名有什么區(qū)別
答：大多數(shù)情況直接用常量名，但是在angular中笆制，使用constant的字段約定與后臺(tái)進(jìn)行數(shù)據(jù)交互的時(shí)候很方便绅这，結(jié)構(gòu)更加清晰。constant()函數(shù)和直接使用常量名輸出的效果是一樣的在辆，但函數(shù)可以動(dòng)態(tài)的輸出不同的常量证薇，在使用上要靈活、方便匆篓。
2浑度、filter怎么去掉時(shí)間的??秒
答：{{date | date : 'yyyy-MM-dd hh:mm:ss EEEE'}}
參數(shù)用來(lái)指定所要的格式，y M d h m s E 分別表示 年 月 日 時(shí) 分 秒 星期奕删，你可以自由組合它們
3俺泣、什么情況下使用filter
答：常用的就是一個(gè)date的格式轉(zhuǎn)換，表格中進(jìn)行排序完残、還有大量的一些約定字段伏钠，使用自定義的filter。
八谨设、
PPT鏈接：PPT
視頻鏈接：
今天的分享就到這里啦熟掂，歡迎大家點(diǎn)贊、轉(zhuǎn)發(fā)扎拣、留言赴肚、拍磚~
