angularjs_AngularJS を使用して単純なテーブルを作成する-jsチュートリアル-php.cn

angularjs_AngularJS を使用して単純なテーブルを作成する

WBOY

リリース： 2016-05-16 15:18:56

オリジナル

1343 人が閲覧しました

これは、angularjs を使用してテーブルを作成し、さまざまな機能を実装する必要があるため、これまでよく知らなかったさまざまな問題や知識点に遭遇したので、ここに記録します。このテーブル関数の作成も少しずつ追加していきますので、完璧ではないかもしれませんし、仕様を満たしていない場合もありますので、ご指摘ください。今後新しい機能が追加された場合も随時更新して紹介していきます

。

まず、テーブルは主に angularjs を使用して BootStrap スタイルで編集されます。便宜上、テスト中にブートストラップ、angularjs、および jq ファイルを自分で導入する必要があります。

テキスト:

HTML 部分

テーブルの生成は比較的簡単で、主に angularjs データバインディングと ng-repeat を使用して各情報を自動的に生成します。

1. まず、ヘッダーのコンテンツ、つまりヘッダー内のコードをカスタマイズする必要があります

1.1 ng-modelはチェックボックスの全選択機能で、この状態のデータをバインドすることでtbody内の全てのチェックボックスに同期的に割り当てることができます(ng-checkedを使用)。

2. tbody で ng-repeat をループして各情報を生成します。

2.1

は、複数行のコンテンツの入力をサポートし、迅速かつ簡単に置き換えることができる div です。ただし、ng-model は div のデータバインディングをサポートしていないため、ディレクティブを使用して ngmodel 関数をカスタマイズする必要があります。これについては後で説明します

2.3 ng-repeatのselectタグを使ってデータをバインドする ng-modelを各オプションにバインドすることはできません

。

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 パート: すべてのスクリプトパートコードは angular.module("myModule",[]).controller('myCtrl', function($scope) {ここに記述されています} Medium

コードをコピーしますコードは次のとおりです:

$scope.isshow=true;

// リクエストから取得したデータを模倣します

$scope.saveDate=[{ id:1,zbname:"中央アジア部門大会",zbtime:"2015-12-03",zbrul1:"優勝",zbrul2:"敗退",por:"説明を入力してください" ,スコア:"2:1",タイプ:"赤側をサポート"},

{ 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 で生成された各データ情報をそれぞれバインドするために使用されます