Créez un tableau simple en utilisant angulairejs

Créez un tableau simple en utilisant angulairejs_AngularJS

WBOY

Libérer： 2016-05-16 15:18:56

original

1343 Les gens l'ont consulté

C'est mon premier projet de ma vie. J'ai besoin d'utiliser angulairejs pour créer des tableaux et implémenter diverses fonctions. Par conséquent, j'ai rencontré divers problèmes et points de connaissances que je ne connaissais pas auparavant, je vais les enregistrer ici pour que tout le monde puisse. apprendre, communiquer et résoudre. Il se peut que ce ne soit pas parfait ou qu'il ne réponde pas aux spécifications. Si vous avez un meilleur moyen, veuillez le signaler. Puisque la production de cette fonction de table s'ajoute petit à petit, je la présenterai également en plusieurs parties. Si de nouvelles fonctions sont ajoutées à l'avenir, je les présenterai également de temps en temps Mise à jour

Tout d'abord, le tableau est édité dans le style BootStrap, principalement en utilisant angulairejs. Pour plus de commodité, il existe également une méthode jQuery. Vous devez introduire vous-même les fichiers bootstrap, angulaires et jq pendant les tests.

Texte :

Partie HTML

La génération d'un tableau est relativement simple, principalement via la liaison de données angulairejs et ng-repeat pour générer automatiquement chaque élément d'information.

1. Vous devez d'abord personnaliser le contenu de l'en-tête, c'est-à-dire le code dans l'en-tête

　1.1 Parmi eux, ng-model est la fonction de sélection totale de la case à cocher En liant les données de cet état, elle peut être attribuée de manière synchrone à toutes les cases à cocher du corps (en utilisant ng-checked)

2. Parcourez ng-repeat dans tbody pour générer chaque élément d'information, où :

　2.1

est un div qui prend en charge la saisie de contenu multiligne et peut remplacer rapidement et facilement la balise textarea. Cependant, comme ng-model ne prend pas en charge la liaison de données des div, vous devez utiliser des directives pour personnaliser la fonction ngmodel, qui sera discutée plus tard

　2.3 Utilisez la balise select dans ng-repeat pour lier les données Vous ne pouvez pas lier ng-model à chaque option. Cela sera expliqué plus tard

3. Enfin, attribuez simplement les données à $scope.saveData pour générer le tableau

<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>

Copier après la connexion

Partie JS : Notez que tous les codes de partie de script sont écrits en angulaire.module("myModule",[]).controller('myCtrl', function($scope) {écrit ici} Medium

Copier le code Le code est le suivant :

$scope.isshow=true;

// Imitez les données obtenues à partir de la requête

$scope.saveDate=[{ id:1,zbname:"Compétition de la Division Asie Centrale",zbtime:"2015-12-03",zbrul1:"Victoire",zbrul2:"Échec",por:"Veuillez saisir la description" ,score : "2:1",type :"support côté rouge"},

{ id:2,zbname:"Compétition Division Japon-Corée",zbtime:"2015-11-11",zbrul1:"Victory",zbrul2:"Victory",por:"Veuillez entrer la description",score:"2 : 1",tapez :"support côté bleu"},

{ id:3,zbname:"Compétition européenne et américaine",zbtime:"2015-3-03",zbrul1:"Échec",zbrul2:"Victoire",por:"Veuillez saisir la description",score:"2 : 1 ",tapez :"Les deux côtés sont identiques"},

{ id:4,zbname:"Compétition de la Division Moyen-Orient",zbtime:"2016-1-05",zbrul1:"Victoire",zbrul2:"Échec",por:"Veuillez saisir la description",score:"2 : 1 ",tapez :"Support côté bleu"},

{ id:5,zbname:"Compétition de la Division de Pékin",zbtime:"2014-12-23",zbrul1:"Échec",zbrul2:"Victoire",por:"Veuillez entrer la description",score:"2:1 ",tapez :"Les deux côtés sont identiques"},

{ id:6,zbname:"Compétition de la Division Corée",zbtime:"2015-11-01",zbrul1:"Échec",zbrul2:"Victoire",por:"Veuillez entrer la description",score:"2:1 ",tapez :"Les deux côtés sont identiques"},

{ id:7,zbname:"Compétition de la Division Japon",zbtime:"2011-1-23",zbrul1:"Victoire",zbrul2:"Échec",por:"Veuillez entrer la description",score:"2:1 ",tapez :"Support côté rouge"},

{ id:8,zbname:"Compétition de la Division Asie centrale",zbtime:"2013-12-15",zbrul1:"Échec",zbrul2:"Victoire",por:"Veuillez saisir la description",score:"2 : 1",tapez :"support côté bleu"},

{ id:9,zbname:"Compétition de la Division Asie centrale",zbtime:"2015-10-17",zbrul1:"Échec",zbrul2:"Victoire",por:"Veuillez saisir la description",score:"2 : 1",tapez :"Support carré rouge"},

{ id:10,zbname:"Concours de la Division Asie Centrale",zbtime:"2015-11-21",zbrul1:"Victory",zbrul2:"Victory",por:"Veuillez saisir la description",score:"2 : 1",tapez :"support côté bleu"},

{ id:11,zbname:"Compétition de la Division Asie centrale",zbtime:"2015-2-02",zbrul1:"Échec",zbrul2:"Échec",por:"Veuillez saisir la description",score:"2 : 1",tapez :"Support carré rouge"},

{ id:12,zbname:"Compétition de la Division Asie centrale",zbtime:"2015-2-05",zbrul1:"Victoire",zbrul2:"Échec",por:"Veuillez saisir la description",score:"2 : 1",tapez :"Les deux côtés sont identiques"}

]; // var arr=[]; // Utilisé pour lier chaque élément d'information généré dans ngrepeat respectivement