現在我們開發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>
```
- README
- 第一章:準備
- 第二章:Hello World!
- 第一節:查看工程文件
- 第二節:JDK、JRE與環境變量
- 第三節:index.jsp
- 第三章:Hello Struts
- 第一節:Web.xml
- 第二節:單入口
- 第三節:Hello Struts
- 第四節:觸發C層
- 第四章:建立數據表
- 第一節:建立實體類
- 第二節:測試一
- 第三節:測試二
- 第四節:引入Hibernate
- 第五節:配置Hibernate
- 第六節:建立連接
- 第七節:實體類映射數據表
- 第八節:完善數據表
- 第五章:教師管理
- 第一節:增加數據--add
- 第二節:增加數據--save
- 1 獲取傳入數據數據
- 2 數據寫入測試
- 3 對接C層
- 第三節:數據列表
- 1 獲取數據
- 2 重構代碼
- 3 C層對接--初始化
- 4 C層添加數據
- 5 V層顯示數據
- 6 獲取數據庫中數據
- 7 顯示性別
- 8 分頁
- 9 條件查詢
- 第四節:修改數據
- 1 edit
- 2 update
- 第五節:刪除數據
- 第六節:總結
- 第六章:重構C層
- 第一節:繼承ActionSupport類
- 第二節:數據驗證
- 第七章:前臺分離(前臺)
- 第一節:環境搭建
- 第二節:運行環境
- 第三節:共享開發環境
- 第四節:生產環境
- 第八章:前臺開發(前臺)
- 第一節:本地化
- 第二節:教師列表
- 1 引入M層
- 2 模擬后臺返回數據
- 3 C與M對接
- 4 C與V對接
- 第九章:前后臺對接(前后臺)
- 第一節:后臺輸出json(后臺)
- 第二節:對接前臺(全棧)
- 第二節:對接API(前臺)
- 第二節:跨域請求(后臺)
- 第三節:重構代碼(前臺)
- 第十章:重構后臺M層
- 第一節:數據訪問DAO層
- 第二節:項目整體重構
- 第十一章:用戶登陸(前后臺)
- 第一節:制定規范
- 第二節:定制測試用例
- 第三節:后臺輸入測試代碼(后臺)
- 第四節:postman(后臺)
- 第五節:新建用戶登陸模塊(前臺)
- 第六節:代碼重構(前臺)
- 第十二章:班級管理(前后臺)
- 第一節:班級列表
- 1 原型開發
- 2 制定規范
- 3 后臺對接開發
- 4 前臺對接開發
- 第二節:Add
- 1 原型開發
- 2 制定規范
- 3 后臺對接開發
- 4 前臺對接開發
- 第三節:Save
- 1 制定規范
- 2 后臺對接開發
- 3 前臺對接開發
- 第四節:Edit
- 1 原型開發
- 2 制定規范
- 3 后臺對接開發
- 4 前臺對接開發
- 第五節:Update
- 1 制定規范
- 2 后臺對接開發
- 3 前臺對接開發
- 第六節:Delete
- 1 制定規范
- 2 后臺對接開發
- 3 前臺對接開發
- 第七節:小結
- 第十三章:班級管理(API)
- 第一節:ER圖
- 第二節:create
- 1 實體層
- 2 dao層
- 3 service(server)層
- 4 action層
- 第三節:ManyToOne
- 第四節:Read
- 1 service(server)層
- 2 action層
- 第五節:update
- 1 service(server)層
- 2 action層
- 第六節:update
- 第十四章:重構服務層