So implementieren Sie die Methode zum Hinzufügen von tr zur Tabelle in AngularJS

Im Folgenden werde ich einen Artikel darüber teilen, wie man tr zu einer Tabelle in AngularJS hinzufügt. Er hat einen guten Referenzwert und ich hoffe, dass er für alle hilfreich sein wird.

Anforderungen:

Das Obige ist eine Tabelle, die die Schleife

<tr ng-repeat="rule in formData.ruleList track by $index">

verwendet zeigen. Eine der aktuellen Anforderungen besteht darin, dass zu jeder Zeile ein Feld hinzugefügt werden muss, dieses jedoch nicht in derselben Zeile angezeigt werden kann und in der nächsten Zeile angezeigt werden muss. Ich dachte zuerst darüber nach, es direkt hinzuzufügen, aber es gab keine Möglichkeit, die Zeile zu ändern. Es reicht nicht aus, unten noch einen hinzuzufügen. Sie können sich nur auf leistungsstarke Angulajs und individuelle Anweisungen verlassen. Fangen wir an.

1 Benutzerdefinierte Anweisung

.directive(
   'kbnTableRow',
   function($compile) {
    return {
    restrict : 'A',
    link : function(scope, element) {
    element.after(&#39;<tr>&#39;);
   function expressDescHtml() {
   var detailHtml = &#39;<td></td><td colspan="5">&#39;
   + &#39;<p ng-show="rule.type!==1">&#39;
    + &#39;<p class="col-xs-9 row">&#39;
 + &#39; <input type="text" class="form-control" ng-model="rule.exprDesc"readonly ">&#39;
+ &#39;</p>&#39;
+&#39;</p>&#39; + &#39;</td>&#39;;
return detailHtml;
    }
  },
 templateUrl : &#39;libs/kbnTable/table_row/rule.html&#39;
      };
     });

2 Rule.html ist der Inhalt im Original

<td class="form-control-static">
 <p class="form-control-static">{{$index+1}}</p>
</td>
<td>
 <p class="form-control-static" ng-show="rule.type===1"
  style="text-align: -webkit-left;">&nbsp&nbsp&nbsp{{rule.rightVar.desc}}</p>
 <p ng-show="rule.type!==1">
  <p class="col-xs-9 row">
   <input type="text" class="form-control" ng-model="rule.rightVar.desc"
    readonly title="{{rule.rightVar.desc}}">
  </p>
  <p class="col-xs-3 ">
   <button class="btn btn-warning"
    ng-click="showRightVar(rule,&#39;rightVar&#39;)">设置</button>
  </p>
 </p>
</td>
<td class="form-control-static" ng-show="formData.execType == &#39;t02&#39;">
 <p class="form-control-static" style="padding-top: 0;">
  <input type="text" class="form-control" ng-model="rule.score"
   title="{{rule.score}}" />
 </p>
</td>
<td class="td-button" style="padding-left: 0; padding-right: 1px;">
 <button class="btn btn-danger" ng-click="del(rule)">删除</button> <input
 type="hidden" ng-model="rule.enable" />
</td>
<td class="td-button" style="padding: 8px 0;">
 <button class="btn btn-danger" ng-click="disabledRule(rule, $event)">
  <span ng-if="rule.enable == 0">启用</span> <span
   ng-if="rule.enable == 1">禁用</span>
 </button>
</td>

Keine Änderung nötig, schreiben Sie einfach, was es ursprünglich war.

3 Schreiben Sie den tr-Schleifenteil auf der Startseite mit unserem neuen Befehl neu:

<p class="row">
   <p class="col-xs-12 row">
    <h4 class="col-xs-12">
     <b>表达式设置</b>
    </h4>
   </p>
   <p class="col-xs-12">
    <p class="row">
     <p class="col-xs-10">
      <table class="table text-center">
       <tr>
        <th ng-click="toggleAll()">
          <i class="fa discover-table-open-icon"
          ng-class="{ &#39;fa-caret-down&#39;: formData.on, &#39;fa-caret-right&#39;: !formData.on }"> 
          </i>
        </th>
        <th width="45px">序号</th>
        <th>左变量</th>
        <th>操作符</th>
        <th>右变量</th>
        <th width="75px" ng-show="formData.execType == &#39;t02&#39;">分值</th>
        <th colspan="2">操作</th>
        <th></th>
       </tr>
       <tbody>
        <tr ng-repeat="rule in formData.ruleList track by $index"
         kbn-table-row class="discover-table-row"></tr>
       </tbody>
      </table>
     </p>
     <p class="col-xs-1">
      <button class="btn btn-info" ng-click="addRule()">新增</button>
     </p>
    </p>
   </p>

Auf diese Weise können unsere anfänglichen Anforderungen erfüllt werden Sie können das Obige jedoch leicht ändern, um bessere Funktionen zu erzielen. Die folgende Zeile kann automatisch verkleinert werden:

Das Obige ist das, was ich für alle zusammengestellt habe Seien Sie in Zukunft für alle hilfreich.

Verwandte Artikel:

So implementieren Sie die Datenübertragung, Änderung und Aktualisierung von Eltern-Kind-Komponenten in Vue (ausführliches Tutorial)

So ändern Sie den Props-Wert in der vue2.0-Unterkomponente und übergeben den Wert an die übergeordnete Komponente

So implementieren Sie das gesamte Neu-Rendering, wenn Sie Daten in einer einzelnen Komponente dynamisch ändern vue

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Methode zum Hinzufügen von tr zur Tabelle in AngularJS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!