大家好，我是IT修真院成都分院第7期的學員韓建名，一枚正直純潔善良的WEB前端程序員。
今天給大家帶來的是：簡述angular中constant和$filter的用法
目錄
1.背景介紹
2.知識剖析
3.常見問題
4.解決方案
5.編碼實戰
6.擴展思考
7.參考文獻
8.更多討論
1.背景介紹
angular是什么，這里不再敘述。
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.常見問題
4.解決方案
5.編碼實戰
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}}
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('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');}}}).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;}}})
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": "省份"
}])
6.擴展思考
7.參考文獻
8.更多討論
