本章中，我們將學習如何創建自定義的展示過濾器。（注解：Angular中的過濾器一般是對頁面上的內容做過濾，并不直接涉及服務端數據的過濾，所以叫展示過濾器也是可想而知的）。
- 在前一章中，詳情頁使用
true或者false來表示某個手機是否有某個功能。下面我們要做的是把這些true和false變成圖形化： ? 代表 "true", ? 代表 "false"。
下面把代碼切換到step-9分支：
git checkout -f step-9
刷新瀏覽器查看效果，你也可以在線上觀看效果
自定義過濾器
為了創建一個自定義的過濾器，我們需要創建一個phonecatFilters模塊，并且把你的過濾器作為該模塊的一部分進行注冊。
注解：“作為某個模塊的一部分進行注冊”不代表把某個功能注冊到這個模塊中，而是作為這個模塊的一部分進行注冊，比如A作為B的丈夫一起去登記結婚，不代表A在B那里登記了成了B的丈夫。至于最終注冊到哪里，應該是Angular框架的核心注冊表。
app/js/filters.js
angular.module('phonecatFilters', []).filter('checkmark', function() {
return function(input) {
return input ? '\u2713' : '\u2718';
};
});
“checkmark”就是我們的過濾器，input的值為true或者false，然后我們根據它的值返回符號形勢的“對 ?”和“錯?”，這兩個符號其實都是Unicode的一個字符：(\u2713
-> ?)、(\u2718-> ?)。
這樣我們的自定義過濾器就寫好了，是不是很簡單。下面我們再把phonecatFilters注冊為phonecatApp模塊的一部分。
...
angular.module('phonecatApp', ['ngRoute','phonecatControllers','phonecatFilters']);
...
模版
由于過濾器代碼在app/js/filters.js文件里，所以我們需要在頁面里引用進來：
app/index.html
...
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
...
模版中使用過濾器的語法如下：
{{ expression | filter }}
下面是實際的使用代碼片段：
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>
...
測試
過濾器與其他控件一樣，都應該被測試，而且很簡單。
test/unit/filtersSpec.js
describe('filter', function() {
beforeEach(module('phonecatFilters'));
describe('checkmark', function() {
it('should convert boolean values to unicode checkmark or cross',
inject(function(checkmarkFilter) {
expect(checkmarkFilter(true)).toBe('\u2713');
expect(checkmarkFilter(false)).toBe('\u2718');
}));
});
});
在我們執行測試之前，我們必須先調用beforeEach(module('phonecatFilters'))，以便我們的phonecatFilters模塊能被正確的注入。
inject(function(checkmarkFilter) { ... })這句話
實驗
下面我們使用一些Angular內置的過濾器來做一些實驗，首先我們把以下數據綁定添加到index.html中。
- {{ "lower cap string" | uppercase }}
- {{ {foo: "bar", baz: 23} | json }}
- {{ 1304375948024 | date }}
- {{ 1304375948024 | date:"MM/dd/yyyy @ h:mma" }}
然后創建一個模型數據并且辦定到input元素上，再為它創建一個過濾器綁定：
<input ng-model="userInput"> Uppercased: {{ userInput | uppercase }}
總結
現在你已經學會了如何創建和測試自定義過濾器，下一章，我們將進一步增強手機詳情頁的功能。
