現在我們開發V層文件。 app/views/teacher/index.html ``` <table class="table"> <tr> <th>序號</th> <th>姓名</th> <th>用戶名</th> <th>性別</th> <th>郵箱</th> </tr> <tr ng-repeat="(index, teacher) in teachers"> <td>{{$index + 1}}</td> <td>{{teacher.name}}</td> <td>{{teacher.username}}</td> <td><span ng-show="teacher.sex">女</span><span ng-hide="teacher.sex">男</span></td> <td>{{teacher.email}}</td> </tr> </table> ``` ## 測試 效果與前面一模一樣  ## 添加filter 下面，我們添加一個過濾器來顯示性別信息 `$ yo angular:filter sexFilter` ``` create app/scripts/filters/sexfilter.js create test/spec/filters/sexfilter.js ``` app/scripts/filters/sexfilter.js ``` 'use strict'; /** * @ngdoc filter * @name webAppApp.filter:sexFilter * @function * @description * # sexFilter * Filter in the webAppApp. */ angular.module('webAppApp') .filter('sexFilter', function() { var getSexByInt = function(sex) { if (sex) { return '女'; } else { return '男'; } }; return function(input) { return getSexByInt(input); }; }); ``` ## 單元測試 test/spec/filters/sexfilter.js ``` 'use strict'; describe('Filter: sexFilter', function() { // load the filter's module beforeEach(module('webAppApp')); // initialize a new instance of the filter before each test var sexFilter; beforeEach(inject(function($filter) { sexFilter = $filter('sexFilter'); })); it('輸入0，返回男；輸入1，返回女', function() { expect(sexFilter(0)).toBe('男'); expect(sexFilter(1)).toBe('女'); }); }); ``` 測試結果： ``` PhantomJS 2.1.1 (Mac OS X 0.0.0): Executed 5 of 5 SUCCESS (0.006 secs / 0.043 secs) Done, without errors. ``` 是的，你的結論沒有錯，如果結果與我們期待的相同，則只顯示通過了幾條測試，并不會顯示具體都是通過的哪幾條測試。嗯，好像這正是我們想要的。正確的時候，不要煩我們；錯誤的時候，告訴我們錯誤在哪。 # 加入過濾器 app/views/teacher/index.html ``` <table class="table"> <tr> <th>序號</th> <th>姓名</th> <th>用戶名</th> <th>性別</th> <th>郵箱</th> </tr> <tr ng-repeat="(index, teacher) in teachers"> <td>{{$index + 1}}</td> <td>{{teacher.name}}</td> <td>{{teacher.username}}</td> <td>{{teacher.sex | sexFilter}}</td> <td>{{teacher.email}}</td> </tr> </table> ```