初步接手人生的第一個項目，需要用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 class="text" contenteditable="true" ng-model="tb.por"></div>是支持輸入多行內容的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) {寫在這里}中
新聞熱點
疑難解答
