使用angularjs建立簡單表格_AngularJS

初步接手人生的第一個項目，需要用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) {寫在這裡}中

複製代碼 代碼如下:

$scope.isshow=true；
//    模仿請求得到的資料
$scope.saveDate=[{ id:1,zbname:"中亞賽區比賽",zbtime:"2015-12-03",zbrul1:"勝利",zbrul2:"失敗",por:"請輸入說明內容",score:"2:1",type:"支援紅方"},
{ id:2,zbname:"日韓賽區比賽",zbtime:"2015-11-11",zbrul1:"勝利",zbrul2:"勝利",por:"請輸入說明內容",score:"2:1",type:"支援藍方"},
{ id:3,zbname:"歐美賽區比賽",zbtime:"2015-3-03",zbrul1:"失敗",zbrul2:"勝利",por:"請輸入說明內容",score:"2:1",type:"雙方相同"},
{ id:4,zbname:"中東賽區比賽",zbtime:"2016-1-05",zbrul1:"勝利",zbrul2:"失敗",por:"請輸入說明內容",score:"2:1",type:"支援藍方"},
{ id:5,zbname:"北京賽區比賽",zbtime:"2014-12-23",zbrul1:"失敗",zbrul2:"勝利",por:"請輸入說明內容",score:"2:1",type:"雙方相同"},
{ id:6,zbname:"韓國賽區比賽",zbtime:"2015-11-01",zbrul1:"失敗",zbrul2:"勝利",por:"請輸入說明內容",score:"2:1",type:"雙方相同"},
{ id:7,zbname:"日本賽區比賽",zbtime:"2011-1-23",zbrul1:"勝利",zbrul2:"失敗",por:"請輸入說明內容",score:"2:1",type:"支援紅方"},
{ id:8,zbname:"中亞賽區比賽",zbtime:"2013-12-15",zbrul1:"失敗",zbrul2:"勝利",por:"請輸入說明內容",score:"2:1",type:"支援藍方"},
{ id:9,zbname:"中亞賽區比賽",zbtime:"2015-10-17",zbrul1:"失敗",zbrul2:"勝利",por:"請輸入說明內容",score:"2:1",type:"支援紅方"},
{ id:10,zbname:"中亞賽區比賽",zbtime:"2015-11-21",zbrul1:"勝利",zbrul2:"勝利",por:"請輸入說明內容",score:"2:1",type:"支援藍方"},
{ id:11,zbname:"中亞賽區比賽",zbtime:"2015-2-02",zbrul1:"失敗",zbrul2:"失敗",por:"請輸入說明內容",score:"2:1",type:"支援紅方"},
{ id:12,zbname:"中亞賽區比賽",zbtime:"2015-2-05",zbrul1:"勝利",zbrul2:"失敗",por:"請輸入說明內容",score:"2:1",type:"雙方相同"}
]; // var arr=[];//用於分別綁定ngrepeat中產生的各條資料資訊