初步接手人生的第一個項目，需要用angularjs製作表格和實現各種功能，因此遇到了各種問題和以前不熟悉的知識點，在此記錄下來，以供大家學習交流，解決方式可能不完善或符合規範，如果大家有更好的方式歡迎指出，由於這個表格功能的製作是一點點添加上去的，因此我也分成幾個部分介紹，日後如增加了新的功能也會不時更新的
首先，表格採用的是BootStrap樣式編輯的，主要使用的是angularjs，為了方便也有jQuery的方法，在測試時需自行引入bootstrap，angularjs和jq的檔案。
正文：
HTML部分
產生表格比較簡單，主要是透過angularjs的資料綁定和ng-repeat來自動產生每一個資訊。
1.首先需要自訂表頭的內容，即thead中的程式碼
1.1其中ng-model是複選框的全選功能，透過綁定該狀態的數據，可以將其同步賦予tbody中的所有checkbox（用ng-checked）
2.在tbody中透過ng-repeat來循環產生其中的每一個訊息，其中：
2.1
是支援輸入多行內容的div，可以方便快速的替代textarea標籤，但是由於ng -model不支援div的資料綁定，因此需要使用directive 來自訂ngmodel功能，後面會說2.3 在ng-repeat中使用select標籤對其中進行資料綁定，也不能將ng-model綁定到每個option中，後面會有說明
3.最後只要將資料賦給$scope.saveData即可產生表格
<table class="table table-striped table-bordered table-hover"
id="example" style="margin-top:10px;">
<thead>
<tr>
<th style="width: 20px;" rowspan="2">全选 <br><input type="checkbox" ng-model="selectAll"></th>
<th style="text-align: center; width: 50px;vertical-align: middle" rowspan="2">序号</th>
<th style="text-align: center; width: 150px;vertical-align: middle" rowspan="2">名称</th>
<th style="text-align: center; width: 150px;vertical-align: middle" rowspan="2">日期</th>
<th style="text-align: center; width: 150px;" colspan="3">比赛队伍（红）</th>
<th style="text-align: center; width: 150px;" colspan="3">比赛队伍（蓝）</th>
<th style="text-align: center; width: 150px;vertical-align: middle" rowspan="2">比分</th>
<th style="text-align: center; width: 150px;vertical-align: middle" rowspan="2">说明</th>
<th style="text-align: center; width: 150px;vertical-align: middle" rowspan="2">玩家支持队伍</th>
</tr>
<tr>
<th style="text-align: center; width: 80px;">第一场</th>
<th style="text-align: center; width: 80px;">第二场</th>
<th style="text-align: center; width: 80px;">说明</th>
<th style="text-align: center; width: 80px;">第一场</th>
<th style="text-align: center; width: 80px;">第二场</th>
<th style="text-align: center; width: 80px;">说明</th>
</tr>
</thead>
<tbody ng-click="fun()" id="page" ng-show="isshow">
<!--track by tb.id-->
<tr ng-repeat="tb in saveDate"><!-- 只用angularjs实现点击一行就选中全行暂时无法实现 -->
<td style="width: 20px;"><input type="checkbox" ng-checked="selectAll"></td>
<td style="text-align:center;">{{tb.id}}</td>
<td style="text-align:center;">{{tb.zbname}}</td>
<td style="text-align:center;">{{tb.zbtime}}</td>
<td style="text-align:center;">{{tb.zbrul1}}</td>
<td style="text-align:center;">{{tb.zbrul2}}</td>
<td style="text-align:center;"><div class="text" contenteditable="true" ng-model="tb.por"></div></td>
<td style="text-align:center;">{{tb.zbrul2}}</td>
<td style="text-align:center;">{{tb.zbrul1}}</td>
<td style="text-align:center;"><div class="text" contenteditable="true" ng-model="tb.por"></div></td><!-- 2016.1.19通过可编译的div来代替输入框 -->
<td style="text-align:center;">{{tb.score}}</td>
<td style="text-align:center;"><div class="text" contenteditable="true" ng-model="tb.por"></div></td>
<td>
<select name="" id="" ng-change="changetype(adds)" ng-model="adds" style="text-align:center;width:100%;min-width:80px;margin-bottom:0">
<option value="" ng-show="isShow">{{tb.type}}</option>
<option value="支持红方">支持红方</option>
<option value="支持蓝方">支持蓝方</option>
<option value="双方相同">双方相同</option>
</select>
</td>
</tr>
</tbody>
</table>
JS部分：備註所有的script部分的程式碼都寫在angular.module("myModule",[]).controller('myCtrl', function($scope) {寫在這裡}中
