過濾器filter

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測試

圖中我們可以看到currency默認添加$符號,精確2位小數,會給數字添加逗號

二、number

currency已經包含了number的功能了,同樣如果值不能轉換為數字,返回空,如果是無窮大返回“∞”
  {{ number_expression | number : fractionSize}}
  fractionSize:小數點位數

number測試

我們可以看到,number默認精確了3位小數
currency和number精確小數時都會發生四舍五入

三、date

關于date的格式化一看官方API簡直嚇死人,真是太多了,我們就來關注一下我們會用到的,想了解更多的自己可以去看看文檔。

  1. yyyy:表示年份,如2016
  2. MM:表示月份,如06
  3. M:同樣表示月份,如6,和MM的區別是個位數月份時前面沒有0,其他類似
  4. dd/d:表示天,如今天是06
  5. HH/H:表示小時,24小時制
  6. hh/h:同樣表示小時,12小時制
  7. mm/m:分鐘
  8. ss/s:秒
  9. sss:毫秒
  10. a :表示AM/PM,沒有它的話12小時制時我們怎么知道上午還是下午啊,當然24小時制時仍然可以用它
    $scope.today = new Date();
date

我們可以看到年、月、日、時間的順序是可以自行調的,連接符也是。之前犯二不解為什么有的是大寫字母有的是小寫字母,那是因為默認是小寫的,但是月份M和分鐘m沖突,所以才有大小寫混合了。。

四、uppercase、lowercase

這兩個確實沒什么好說的
$scope.str = 'Hello AngularJs';

大小寫轉換

五、limitTo

{{ limitTo_expression | limitTo : limit : begin}}
limit:截取長度
begin:開始位置
limitTo的作用類似于string的substr函數,只不過參數顛倒了,注意是substr不是substring,
limitTo不僅可以用于字符串,也可以用于數組,此處僅以字符串舉例

limitTo
六、orderBy

{{ orderBy_expression | orderBy : expression : reverse}}
orderBy的作用是按照某一規則給數組進行排序,可以是普通數組,也可以是對象數組
$scope.items = [{id: 1001, name: '趙云', country: '蜀'}, {id: 1003, name: '關羽', country: '蜀'}, {id: 1002,name: '馬超',country: '蜀'}];

orderBy按照對象id排序

從例子2中我們可以看到,orderBy默認按照對象id進行了升序排序,例子3“-id”即按照id進行了降序排序,而例子4可以看出reverse為true的作用是反轉排序結果,JavaScript中也有reverse函數。
普通數組也是可以的{{[22,34,12,3,56]|orderBy:'':true}}

普通數組排序
七、filter

終于到最后一個了,寫完就可以回家吃飯了。
看名字就知道filter是過濾作用啦~~還是直接舉例子吧

filter過濾

我們看到:

  1. 例子1中直接filter:"00"匹配到了所有數據,那是因為filter進行的是模糊匹配,只要有一個屬性值含有”00“就會匹配到
  2. 例子2中用filter:{id:'1001'},不出我們所料這次只匹配到了id為1001的數據,其實這里仍然是模糊匹配,如果我們把“1001”改成“001”你試試是不是仍會匹配到
  3. 忘記告訴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字符串輸出到頁面干嘛。
我們來看一下它的效果:

json過濾器

是不是看起來方便多了。
類似的其他過濾器也能在函數里面用:
$scope.test = $filter('currency')(142, 'CNY', 5);
其他類似,可以看看文檔,試一下。
而且filter過濾器還能自定義過濾函數,功能會更加強大,類似于ECMAScript5中的filter函數,快去看看。

總結

肚子好餓,我要吃飯去了
  github代碼地址

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容