Erstellen Sie eine einfache Tabelle mit anglejs_AngularJS

Dies ist mein erstes Projekt in meinem Leben. Ich muss AngularJS verwenden, um Tabellen zu erstellen und verschiedene Funktionen zu implementieren. Daher bin ich auf verschiedene Probleme und Wissenspunkte gestoßen, mit denen ich vorher nicht vertraut war Lernen, kommunizieren und lösen. Wenn Sie einen besseren Weg haben, weisen Sie ihn bitte darauf hin. Da die Produktion dieser Tabellenfunktion nach und nach erfolgt, werde ich sie auch in mehreren Teilen vorstellen. Wenn in Zukunft neue Funktionen hinzugefügt werden, werde ich diese auch von Zeit zu Zeit aktualisieren

Zunächst wird die Tabelle im BootStrap-Stil bearbeitet, hauptsächlich mit AngularJS. Der Einfachheit halber gibt es auch eine jQuery-Methode. Sie müssen beim Testen selbst Bootstrap-, AngularJS- und JQ-Dateien einführen.

Text:

HTML-Teil

Das Generieren einer Tabelle ist relativ einfach, hauptsächlich durch AngularJS-Datenbindung und NG-Repeat, um jede Information automatisch zu generieren.

1. Zuerst müssen Sie den Inhalt des Headers anpassen, also den Code im Kopf

　1.1 Unter diesen ist ng-model die All-Select-Funktion des Kontrollkästchens. Durch die Bindung der Daten dieses Status kann es allen Kontrollkästchen im Tbody synchron zugewiesen werden (mithilfe von ng-checked)

2. Durchlaufen Sie ng-repeat im Körper, um jede Information zu generieren, wobei:

　2.1a5fe572a39516326636090c31a707de216b28748ea4df4d9c2150843fecfba68 ist ein Div, das die Eingabe mehrzeiliger Inhalte unterstützt und schnell und einfach ersetzt werden kann das textarea-Tag. Da ng-model jedoch keine Datenbindung von divs unterstützt, müssen Sie Anweisungen verwenden, um die ngmodel-Funktion anzupassen, was später besprochen wird

　2.3 Verwenden Sie das Select-Tag in ng-repeat, um Daten zu binden. Sie können ng-model nicht an jede Option binden. Dies wird später erklärt

3. Zum Schluss weisen Sie die Daten einfach $scope.saveData zu, um die Tabelle zu generieren

<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-Teil: Beachten Sie, dass alle Skriptteilcodes in angle.module("myModule",[]).controller('myCtrl', function($scope) {write here} Medium geschrieben sind

Code kopieren Der Code lautet wie folgt:

$scope.isshow=true;
// Imitiere die aus der Anfrage erhaltenen Daten
$scope.saveDate=[{ id:1,zbname:"Central Asia Division Competition",zbtime:"2015-12-03",zbrul1:"Sieg",zbrul2:"Misserfolg",por:"Bitte geben Sie die Beschreibung ein" ,score:"2:1",type:"support red side"},
{ id:2,zbname:"Japan-Korea Division Competition",zbtime:"2015-11-11",zbrul1:"Victory",zbrul2:"Victory",por:"Bitte geben Sie die Beschreibung ein",score:"2 : 1",type:"support blue side"},
{ id:3,zbname:"Europäischer und amerikanischer Wettbewerb",zbtime:"2015-3-03",zbrul1:"Misserfolg",zbrul2:"Sieg",por:"Bitte geben Sie die Beschreibung ein",score:"2: 1 ",Typ:"Beide Seiten sind gleich"},
{ id:4,zbname:"Middle East Division Competition",zbtime:"2016-1-05",zbrul1:"Sieg",zbrul2:"Misserfolg",por:"Bitte geben Sie die Beschreibung ein",score:"2: 1 ",type:"Support blue side"},
{ id:5,zbname:"Beijing Division Competition",zbtime:"2014-12-23",zbrul1:"Misserfolg",zbrul2:"Sieg",por:"Bitte geben Sie die Beschreibung ein",score:"2:1 ",type:"Beide Seiten sind gleich"},
{ id:6,zbname:"Korea Division Competition",zbtime:"2015-11-01",zbrul1:"Misserfolg",zbrul2:"Sieg",por:"Bitte geben Sie die Beschreibung ein",score:"2:1 ",type:"Beide Seiten sind gleich"},
{ id:7,zbname:"Japan Division Competition",zbtime:"2011-1-23",zbrul1:"Sieg",zbrul2:"Misserfolg",por:"Bitte geben Sie die Beschreibung ein",score:"2:1 ",type:"Unterstützen Sie die rote Seite"},
{ id:8,zbname:"Central Asia Division Competition",zbtime:"2013-12-15",zbrul1:"Misserfolg",zbrul2:"Sieg",por:"Bitte geben Sie die Beschreibung ein",score:"2: 1",type:"support blue side"},
{ id:9,zbname:"Central Asia Division Competition",zbtime:"2015-10-17",zbrul1:"Misserfolg",zbrul2:"Sieg",por:"Bitte geben Sie die Beschreibung ein",score:"2: 1",type:"Support red quadrat"},
{ id:10,zbname:"Central Asia Division Competition",zbtime:"2015-11-21",zbrul1:"Victory",zbrul2:"Victory",por:"Bitte geben Sie die Beschreibung ein",score:"2: 1",type:"support blue side"},
{ id:11,zbname:"Central Asia Division Competition",zbtime:"2015-2-02",zbrul1:"Fehler",zbrul2:"Fehler",por:"Bitte geben Sie die Beschreibung ein",score:"2: 1",type:"Support red quadrat"},
{ id:12,zbname:"Central Asia Division Competition",zbtime:"2015-2-05",zbrul1:"Sieg",zbrul2:"Misserfolg",por:"Bitte geben Sie die Beschreibung ein",score:"2: 1",type:"Beide Seiten sind gleich"}
]; // var arr=[]; // Wird verwendet, um jede in ngrepeat generierte Dateninformation zu binden