快捷導(dǎo)航

使用angularjs創(chuàng)建簡(jiǎn)單表格

更新時(shí)間：2016年01月21日 10:11:58 投稿：hebedich

AngularJS提供豐富填寫表單和驗(yàn)證。我們可以用ng-click來處理AngularJS點(diǎn)擊按鈕事件，然后使用 $dirty 和 $invalid標(biāo)志做驗(yàn)證的方式。使用novalidate表單聲明禁止任何瀏覽器特定的驗(yàn)證。下面我們來看看如何使用angularjs創(chuàng)建簡(jiǎn)單表格

初步接手人生的第一個(gè)項(xiàng)目，需要用angularjs制作表格和實(shí)現(xiàn)各種功能，因此遇到了各種問題和以前不熟悉的知識(shí)點(diǎn)，在此記錄下來，以供大家學(xué)習(xí)交流，解決方式可能并不完善或符合規(guī)范，如果大家有更好的方式歡迎指出，由于這個(gè)表格功能的制作是一點(diǎn)點(diǎn)添加上去的，因此我也分成幾個(gè)部分介紹，日后如增加了新的功能也會(huì)不時(shí)更新的

首先，表格采用的是BootStrap樣式編輯的，主要使用的是angularjs，為了方便也有jQuery的方法，在測(cè)試時(shí)需自行引入bootstrap，angularjs和jq的文件。

正文：

HTML部分

生成表格比較簡(jiǎn)單，主要是通過angularjs的數(shù)據(jù)綁定和ng-repeat來自動(dòng)生成每一條信息。

1.首先需要自定義表頭的內(nèi)容，即thead中的代碼

　　1.1其中ng-model是復(fù)選框的全選功能，通過綁定該狀態(tài)的數(shù)據(jù)，可以將其同步賦予tbody中的所有checkbox（用ng-checked）

2.在tbody中通過ng-repeat來循環(huán)生成其中的每一條信息，其中：

　　2.1<div class="text" contenteditable="true" ng-model="tb.por"></div>是支持輸入多行內(nèi)容的div，可以方便快捷的替代textarea標(biāo)簽，但是由于ng-model不支持div的數(shù)據(jù)綁定，因此需要使用directive 來自定義ngmodel功能，后面會(huì)說

　　2.3 在ng-repeat中使用select標(biāo)簽對(duì)其中進(jìn)行數(shù)據(jù)綁定，也不能將ng-model綁定到每個(gè)option中，后面會(huì)有說明

3.最后只要將數(shù)據(jù)賦給$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">序號(hào)</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">比賽隊(duì)伍（紅）</th>
            <th style="text-align: center; width: 150px;" colspan="3">比賽隊(duì)伍（藍(lán)）</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">玩家支持隊(duì)伍</th>
          </tr>
          <tr>
            <th style="text-align: center; width: 80px;">第一場(chǎng)</th>
            <th style="text-align: center; width: 80px;">第二場(chǎng)</th>
            <th style="text-align: center; width: 80px;">說明</th>
            <th style="text-align: center; width: 80px;">第一場(chǎng)</th>
            <th style="text-align: center; width: 80px;">第二場(chǎng)</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實(shí)現(xiàn)點(diǎn)擊一行就選中全行暫時(shí)無法實(shí)現(xiàn) -->
              <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="支持藍(lán)方">支持藍(lán)方</option>
                  <option value="雙方相同">雙方相同</option>
                </select>
              </td>
            </tr>
          </tbody>
        </table>

JS部分：備注所有的script部分的代碼都寫在angular.module("myModule",[]).controller('myCtrl', function($scope) {寫在這里}中

復(fù)制代碼代碼如下:

$scope.isshow=true；

//    模仿請(qǐng)求得到的數(shù)據(jù)

$scope.saveDate=[{ id:1,zbname:"中亞賽區(qū)比賽",zbtime:"2015-12-03",zbrul1:"勝利",zbrul2:"失敗",por:"請(qǐng)輸入說明內(nèi)容",score:"2:1",type:"支持紅方"},

{ id:2,zbname:"日韓賽區(qū)比賽",zbtime:"2015-11-11",zbrul1:"勝利",zbrul2:"勝利",por:"請(qǐng)輸入說明內(nèi)容",score:"2:1",type:"支持藍(lán)方"},

{ id:3,zbname:"歐美賽區(qū)比賽",zbtime:"2015-3-03",zbrul1:"失敗",zbrul2:"勝利",por:"請(qǐng)輸入說明內(nèi)容",score:"2:1",type:"雙方相同"},

{ id:4,zbname:"中東賽區(qū)比賽",zbtime:"2016-1-05",zbrul1:"勝利",zbrul2:"失敗",por:"請(qǐng)輸入說明內(nèi)容",score:"2:1",type:"支持藍(lán)方"},

{ id:5,zbname:"北京賽區(qū)比賽",zbtime:"2014-12-23",zbrul1:"失敗",zbrul2:"勝利",por:"請(qǐng)輸入說明內(nèi)容",score:"2:1",type:"雙方相同"},

{ id:6,zbname:"韓國(guó)賽區(qū)比賽",zbtime:"2015-11-01",zbrul1:"失敗",zbrul2:"勝利",por:"請(qǐng)輸入說明內(nèi)容",score:"2:1",type:"雙方相同"},

{ id:7,zbname:"日本賽區(qū)比賽",zbtime:"2011-1-23",zbrul1:"勝利",zbrul2:"失敗",por:"請(qǐng)輸入說明內(nèi)容",score:"2:1",type:"支持紅方"},

{ id:8,zbname:"中亞賽區(qū)比賽",zbtime:"2013-12-15",zbrul1:"失敗",zbrul2:"勝利",por:"請(qǐng)輸入說明內(nèi)容",score:"2:1",type:"支持藍(lán)方"},

{ id:9,zbname:"中亞賽區(qū)比賽",zbtime:"2015-10-17",zbrul1:"失敗",zbrul2:"勝利",por:"請(qǐng)輸入說明內(nèi)容",score:"2:1",type:"支持紅方"},

{ id:10,zbname:"中亞賽區(qū)比賽",zbtime:"2015-11-21",zbrul1:"勝利",zbrul2:"勝利",por:"請(qǐng)輸入說明內(nèi)容",score:"2:1",type:"支持藍(lán)方"},

{ id:11,zbname:"中亞賽區(qū)比賽",zbtime:"2015-2-02",zbrul1:"失敗",zbrul2:"失敗",por:"請(qǐng)輸入說明內(nèi)容",score:"2:1",type:"支持紅方"},

{ id:12,zbname:"中亞賽區(qū)比賽",zbtime:"2015-2-05",zbrul1:"勝利",zbrul2:"失敗",por:"請(qǐng)輸入說明內(nèi)容",score:"2:1",type:"雙方相同"}

]; // var arr=[];//用于分別綁定ngrepeat中生成的各條數(shù)據(jù)信息