So fügen Sie tr zur Tabelle in AngularJS hinzu

Dieser Artikel teilt Ihnen hauptsächlich die Methode zum Hinzufügen von tr zu einer Tabelle in AngularJS mit. Er hat einen guten Referenzwert und ich hoffe, dass er für alle hilfreich sein wird. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Anforderungen:

Das Obige ist eine Tabelle mit

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

Schleifenanzeige. 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 Anweisungen

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

2 Rule.html ist der Originalinhalt

<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 erforderlich, was auch immer das Original ist, schreiben Sie es einfach hier.

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>

Damit sind unsere anfänglichen Anforderungen erfüllt, aber mit den oben genannten geringfügigen Änderungen kann eine bessere Funktion erreicht werden , kann die folgende Zeile automatisch verkleinert werden:

Verwandte Empfehlungen:

Tabelle ermöglicht das Doppelklicken zum Bearbeiten, Hinzufügen und Zeile löschen

Detaillierte Erklärung, wie jQuery den Wert einer bestimmten Tabellenspalte erhält

Beispielfreigabe von jQuery, das die Tabellensortierfunktion implementiert

Das obige ist der detaillierte Inhalt vonSo fügen Sie tr zur Tabelle in AngularJS hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!