AngularJS--過濾器

標籤：保留   return   ret   filter   friend   條件   格式   bbb   舉例   

一、過濾器

　　過濾器（filter）：通過某種規則過濾一些資料，得到自己想要的結果。

　　下面來講一下AngularJS中的一些過濾器：

　　1. currency（貨幣過濾器）

　　　　用法：{{數字 | currency ：“代表金錢的符號或者英文” ：小數點後保留幾位（會四捨五入）}}

　　　　舉例：{{1000|currency：“￥”：2}} 

　　　　結果：￥1,000.00

　　2. date(日期)

　　　　用法：{{時間|date:‘時間的格式‘}}

　　　　舉例：{{‘1477838110579‘|date:‘yyyy-MM-dd hh:mm:ss EEEE‘}}

　　　　結果：2016-10-30 10:35:10 Sunday

　　3. json（json格式）

　　　　用法：{{json資料|json}}

　　　　舉例：<pre>{{friends|json}}</pre>

<script>    var app=angular.module("myApp",[]);    app.controller("myCtrl",function($scope){        $scope.friends=[            {name:"John",phone:"555-1276"},            {name:"Mark",phone:"655-1276"},            {name:"Annie",phone:"955-1276"},            {name:"Joe",phone:"255-1276"},            {name:"Tom",phone:"655-1276"},            {name:"Lilie",phone:"855-1276"},        ]    })</scripe>

　　　　結果：

[  {    "name": "John",    "phone": "555-1276"  },  {    "name": "Mark",    "phone": "655-1276"  },  {    "name": "Annie",    "phone": "955-1276"  },  {    "name": "Joe",    "phone": "255-1276"  },  {    "name": "Tom",    "phone": "655-1276"  },  {    "name": "Lilie",    "phone": "855-1276"  }]

　　4. limitTo(限制個數)

　　　　用法：{{數字/字串/數組 | limitTo：3:1}}

　　　　舉例：{{[1,2,3,4,5,6,7,8]|limitTo:3:1}}

　　　　結果：[2,3,4]

　　5. lowercase（轉小寫）、uppercase（轉大寫）

　　　　用法：{{‘String’ | lowercase/uppercase}}

　　　　舉例：{{"aaa"|uppercase}}

　　　　結果：AAA

　　6. number（數字過濾器）

　　　　用法：{{數字 | number:小數點位元（會四捨五入）}}

　　　　舉例：{{1000|number:4}}

　　　　結果：1,000.0000

　　7. filter （篩選）

　　　　用法：{{資料 | filter：{條件}}}

　　　　舉例：

<ul>    <li ng-repeat="item in friends|filter:{name:‘J‘}">        <span>{{item.name}}</span>        <span>{{item.phone}}</span>    </li></ul>

　　　　結果：

• John 555-1276
• Joe 255-1276

　　　　說明：{name:"J"}數目只對name屬性進行篩選，且篩選屬性值中包含J的項

 

　　8. orderBy（排序）

　　　　用法：  {{資料 | orderBy ：條件}}

<ul>    <li ng-repeat="item in friends|orderBy:‘-phone‘">        <span>{{item.name}}</span>        <span>{{item.phone}}</span>    </li></ul>

 　　　　結果：

• Annie 955-1276
• Lilie 855-1276
• Mark 655-1276
• Tom 655-1276
• John 555-1276
• Joe 255-1276

　　說明：‘-phone‘表示 從大到小排序 ‘phone’則為從小到大

　　

二、自訂過濾器

　　

<script>    var app=angular.module("myApp",[]);    //過濾器的名稱  function    app.filter(‘myFilter‘,function(){        //data是傳過來的資料        return function(data){            return data.toUpperCase();        }    })    app.controller("myCtrl",function($scope,$filter){        //過濾器名稱  要過濾的資料        $scope.text=$filter("myfilter")("bbb");    })</script>

AngularJS--過濾器