现在我们开发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> ```