在這一步你將學習到如何創建自己的顯示過濾器。
請重置工作目錄：
git checkout -f step-9
現在轉到一個手機詳細信息頁面。在上一步，手機詳細頁面顯示“true”或者“false”來說明某個手機是否具有特定的特性。現在我們使用一個定制的過濾器來把那些文本串圖形化：√作為“true”；以及×作為“false”。來讓我們看看過濾器代碼長什麼樣子。
步驟8和步驟9之間最重要的不同在下面列出。你可以在GitHub裡看到完整的差別。
定製過濾器
為了創建一個新的過濾器，先創建一個phonecatFilters模塊，並且將定制的過濾器註冊給這個模塊。
app/js/filters.js
angular.module('phonecatFilters', []).filter('checkmark', function() { return function(input) { return input ? '/u2713' : '/u2718'; };});我們的過濾器命名為checkmark。它的輸入要么是true，要么是false，並且我們返回兩個表示true或false的unicode字符（/u2713和/u2718）。
現在我們的過濾器準備好了，我們需要將我們的phonecatFilters模塊作為一個依賴註冊到我們的主模塊phonecat上。
app/js/app/js
...angular.module('phonecat', ['phonecatFilters'])....模板
由於我們的模板代碼寫在app/js/filter.js文件中，所以我們需要在佈局模板中引入這個文件。
app/index.html
... <script src="js/controllers.js"></script> <script src="js/filters.js"></script>...
在AngularJS模板中使用過濾器的語法是：
{{ 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'); })); });});注意在執行任何過濾器測試之前，你需要為phonecatFilters模塊配置我們的測試注入器。
執行./scripts/test/sh運行測試，你應該會看到如下的輸出：
Chrome: Runner reset.....Total 4 tests (Passed: 4; Fails: 0; Errors: 0) (3.00 ms) Chrome 19.0.1084.36 Mac OS: Run 4 tests (Passed: 4; Fails: 0; Errors 0) (3.00 ms)
現在讓我們來練習一下AngularJS內置過濾器，在index.html中加入如下綁定：
我們也可以用一個輸入框來創建一個模型，並且將之與一個過濾後的綁定結合在一起。在index.html中加入如下代碼：
<input ng-model="userInput"> Uppercased: {{ userInput | uppercase }}
總結
現在你已經知道瞭如何編寫和測試一個定制化插件，在步驟10中我們會學習如何用AngularJS繼續豐富我們的手機詳細信息頁面。
以上就是對AngularJS 過濾器的資料整理，後續繼續補充相關資料，謝謝大家對本站的支持！