So fügen Sie tr zur Tabelle in AngularJS hinzu

Dieses Mal zeige ich Ihnen, wie Sie tr zur Tabelle in AngularJS hinzufügen. Was sind die Vorsichtsmaßnahmen für das Hinzufügen von Tr zur Tabelle in AngularJS? ein Blick.

Das Obige ist eine Tabelle mit

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

Loop-Anzeige. 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 Benutzerdefinierter Befehl

.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;">   {{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>

Es besteht keine Notwendigkeit, etwas zu ändern, was auch immer ursprünglich geschrieben wurde, steht 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>

Auf diese Weise können unsere anfänglichen Anforderungen erfüllt werden, aber mit den oben genannten geringfügigen Änderungen werden bessere Funktionen erreicht. Die folgende Zeile kann automatisch verkleinert werden:

Ich glaube, Sie haben die Methode gemeistert, nachdem Sie den Fall hier gelesen haben Artikel, und es wird noch mehr spannende Dinge geben. Bitte beachten Sie andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der globalen und lokalen Vue-Registrierung

Wie gehe ich mit der Kompatibilität der Easyui-Datums- und Uhrzeitbox im IE um?

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!