AngularJs過濾器


內置過濾器

1、currency(貨幣處理)

  currency可以將數字格式轉化為貨幣的形式,如果不傳參數,默認為$。

1 {{num|currency:"¥"}}

  展現的形式為¥xxx。

2、date(日期格式化)

  angular中提供的date過濾器能夠滿足一般的時間格式要求。

{{date|date:'y-m-d h:m:s EEEE'}}

  展現形式為:年-月-日 時:分:秒 星期,它們之間的格式可以自由組合,脫離了原生js中的單調和復雜性。

3、filter(匹配字符串)

  filter用來處理數組,然后可以挑選出含有的所選中的子串元素,作為子數組來返回。可以是字符串數組,也可以是對象數組。如果是對象數組,可以匹配屬性的值,它接受一個參數,來定義子串的規則。

1 $scope.arr = ["Monday","Tuesday","星期三","星期四","周五","周六"];
1 <li>{{arr|filter:'d'}}</li>
2 <li>{{arr|filter:'周'}}</li>

  它能選出數組中含有字母“d”、含有漢子“周”的元素,然后分別以數組的形式返回。

4、json(格式化json對象)

  json過濾器可以把一個js對象格式化為json字符串,沒有參數。這東西有什么用呢,官網說它 可以用來進行調試,嗯,是個不錯的選擇。或者,也可以用在js中使用,作用就和我們熟悉的JSON.stringify()一樣。

1 {{ jsonTest | json}}

5、limitTo(限制數組長度或字符串長度)

  limitTo過濾器用來截取數組或者字符串的長度,接收一個參數用來指定要截取的數組或者字符串的長度,如果值為負數,那么就從數組或者字符串的尾部開始截取。

1 <li>{{arr|limitTo:'3'}}</li>

  它會截取數組arr的前三位,然后以數組的形式返回。

6、lowercase(小寫格式)

  把英文字母全部轉化成小寫的形式,也沒有太大的用處。沒有參數。

<li>{{da|lowercase}}</li>

  這里只能轉換英文,遇到其他的則不轉換。

7、uppercase(大寫格式)

  這個的寫法跟lowercase相同。

8、number(格式化數字)

  number過濾器可以為一串數字進行分位,相當於千位分割符,如:123,456,789。可以接收一個參數,指定float類型保留幾位小數。

<li>{{num|number:2}}</li>

  這個就表示保留小數點后兩位。

9、orderBy(排序)

  orderBy過濾器可以將數組中的元素進行排序,接收一個參數指定排序的規則,參數可以是字符串,表示以這個屬性名稱進行排序;可以是一個函數,定義排序屬性;可以是一個數組,表示依次按數組的屬性值進行排序。

1 $scope.err = [
2             {name : 'jack',age : 30},
3             {name : 'mack',age : 24},
4             {name : 'sunny',age : 28},
5             {name : 'jim',age : 20},
6             ]
1 <li>{{err|orderBy:'age':true}}</li>

  這個就是以age的從大到小進行排序。

自定義過濾器

 1 <div ng-controller = 'con'>
 2         <div>{{msg|prz}}</div>
 3     </div>
 4     <script src="public/libs/angular/angular.min.js"></script>
 5     <script>
 6         var App = angular.module('App',[]);
 7         App.controller('con',['$scope',function($scope){
 8             $scope.msg = 'you can kill';
 9         }])
10         App.filter('prz',function(){
11             return function(z){
12                 return z[0].toUpperCase()+z.slice(1); 
13             }
14         })
15     </script>

  上面代碼表示,自定義一個首字母大寫的過濾器。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM