AngularJS學習--- 過濾器(filter),格式化要顯示的資料 step 9

標籤：style   blog   class   code   java   c   

1.切換目錄,啟動項目

git checkout step-9npm start

2.需求:

格式化要顯示的資料.

比如要將true-->yes,false-->no,這樣相互替換.

3.效果:

 

 

 

4.代碼實現:

這裡主要是使用filter過濾器來進行資料過濾,這裡只是在前端進行資料過濾,未經處理資料是不發生變化的.

$filter:Filters are used for formatting data displayed to the user,格式化要顯示的資料.

用法:

 {{ expression [| filter_name[:parameter_value] ... ] }}

自訂過濾器:

angular.module(‘phonecatFilters‘, []).filter(‘checkmark‘, function() {  return function(input) {    return input ? ‘yes‘ : ‘no‘;  };});

現在我們的過濾器已經寫好了,那麼將其註冊到我們的項目中:

app/js/app.js:

...angular.module(‘phonecatApp‘, [‘ngRoute‘,‘phonecatControllers‘,‘phonecatFilters‘]);...

實際去用:

app/partials/phone-detail.html:

...    <dl>      <dt>Infrared</dt>      <dd>{{phone.connectivity.infrared | checkmark}}</dd>      <dt>GPS</dt>      <dd>{{phone.connectivity.gps | checkmark}}</dd>    </dl>...

也可以使用angularjs的內建過濾器:

{{ "lower cap string" | uppercase }}{{ {foo: "bar", baz: 23} | json }}{{ 1304375948024 | date }}{{ 1304375948024 | date:"MM/dd/yyyy @ h:mma" }}

例:

   <dt>Type</dt>-      <dd>{{phone.battery.type}}</dd>+      <dd>{{phone.battery.type | uppercase }}</dd>       <dt>Talk Time</dt>       <dd>{{phone.battery.talkTime}}</dd>       <dt>Standby time (max)</dt>

電池這一欄變成大寫的了.如下所示: