angular中filter過濾器主要有兩個作用:格式化數據和過濾數據。filter組件共有以下幾種:1、currency 2、number 3、date 4、json 5、lowercase 6、uppercase 7、limitTo 8、orderBy 9、filter。
官方API:https://code.angularjs.org/1.4.0-rc.2/docs/api/ng/filter
一 、currency
{{ currency_expression | currency : symbol : fractionSize}}
currency的作用是將值轉換為精確小數點的數字,同時在前面添加貨幣符號,如果值不能轉化為數字,會返回空字符
symbol:貨幣符號,
fractionSize:精確小數位數
$scope.money = 126893.5564;
圖中我們可以看到currency默認添加$符號,精確2位小數,會給數字添加逗號
二、number
currency已經包含了number的功能了,同樣如果值不能轉換為數字,返回空,如果是無窮大返回“∞”
{{ number_expression | number : fractionSize}}
fractionSize:小數點位數
我們可以看到,number默認精確了3位小數
currency和number精確小數時都會發生四舍五入
三、date
關于date的格式化一看官方API簡直嚇死人,真是太多了,我們就來關注一下我們會用到的,想了解更多的自己可以去看看文檔。
- yyyy:表示年份,如2016
- MM:表示月份,如06
- M:同樣表示月份,如6,和MM的區別是個位數月份時前面沒有0,其他類似
- dd/d:表示天,如今天是06
- HH/H:表示小時,24小時制
- hh/h:同樣表示小時,12小時制
- mm/m:分鐘
- ss/s:秒
- sss:毫秒
- a :表示AM/PM,沒有它的話12小時制時我們怎么知道上午還是下午啊,當然24小時制時仍然可以用它
$scope.today = new Date();
我們可以看到年、月、日、時間的順序是可以自行調的,連接符也是。之前犯二不解為什么有的是大寫字母有的是小寫字母,那是因為默認是小寫的,但是月份M和分鐘m沖突,所以才有大小寫混合了。。
四、uppercase、lowercase
這兩個確實沒什么好說的
$scope.str = 'Hello AngularJs';
五、limitTo
{{ limitTo_expression | limitTo : limit : begin}}
limit:截取長度
begin:開始位置
limitTo的作用類似于string的substr函數,只不過參數顛倒了,注意是substr不是substring,
limitTo不僅可以用于字符串,也可以用于數組,此處僅以字符串舉例
六、orderBy
{{ orderBy_expression | orderBy : expression : reverse}}
orderBy的作用是按照某一規則給數組進行排序,可以是普通數組,也可以是對象數組
$scope.items = [{id: 1001, name: '趙云', country: '蜀'}, {id: 1003, name: '關羽', country: '蜀'}, {id: 1002,name: '馬超',country: '蜀'}];
從例子2中我們可以看到,orderBy默認按照對象id進行了升序排序,例子3“-id”即按照id進行了降序排序,而例子4可以看出
reverse
為true的作用是反轉排序結果,JavaScript中也有reverse函數。普通數組也是可以的
{{[22,34,12,3,56]|orderBy:'':true}}
七、filter
終于到最后一個了,寫完就可以回家吃飯了。
看名字就知道filter是過濾作用啦~~還是直接舉例子吧
我們看到:
- 例子1中直接filter:"00"匹配到了所有數據,那是因為filter進行的是模糊匹配,只要有一個屬性值含有”00“就會匹配到
- 例子2中用filter:{id:'1001'},不出我們所料這次只匹配到了id為1001的數據,其實這里仍然是模糊匹配,如果我們把“1001”改成“001”你試試是不是仍會匹配到
- 忘記告訴item是啥了
$scope.item={}; $scope.item.id='001';
我們用了item.id和item.$進行了匹配,這其實是一種更加靈活的方式,下一節中我們會用到。
八、In JavaScript
我們上面講的一些都是在html中使用過濾器,其實在JavaScript中也可以。
myApp.controller('filterCtr', ['$scope', '$filter', function ($scope, $filter) {}
我們要先注入$filter,然后我們再講一個新的過濾器-json
官方說json過濾器的作用就是為了調試用的,也是,要不然誰沒事把一個json字符串輸出到頁面干嘛。
我們來看一下它的效果:
是不是看起來方便多了。
類似的其他過濾器也能在函數里面用:
$scope.test = $filter('currency')(142, 'CNY', 5);
其他類似,可以看看文檔,試一下。
而且filter過濾器還能自定義過濾函數,功能會更加強大,類似于ECMAScript5中的filter函數,快去看看。
總結
肚子好餓,我要吃飯去了
github代碼地址