Comment ajouter tr à la table dans angulairejs

Cette fois, je vais vous montrer comment ajouter tr à la table dans angulairejs. Quelles sont les précautions pour ajouter tr à la table dans angulairejs. Ce qui suit est un cas pratique, prenons. un regard.

Ce qui précède est un tableau utilisant

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

Affichage en boucle. L'une des exigences actuelles est qu'un champ doit être ajouté à chaque ligne, mais il ne peut pas être affiché sur la même ligne et doit être affiché sur la ligne suivante. J'ai d'abord pensé à l'ajouter directement, mais il n'y avait aucun moyen de changer la ligne. Il ne servira à rien d'en ajouter un autre ci-dessous. Vous ne pouvez compter que sur des angles puissants et des instructions personnalisées. Commençons.

1 commande personnalisée

.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 règle.html est le contenu 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;">   {{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>

Il n’est pas nécessaire de changer, quoi que ce soit à l’origine, c’est écrit ici.

3 Réécrivez la partie boucle tr dans la page initiale avec notre nouvelle commande :

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

De cette façon, nos exigences initiales peuvent être complétées, mais avec de légères modifications ci-dessus, de meilleures fonctions seront obtenues. La ligne suivante peut être automatiquement réduite :

Je pense que vous maîtrisez la méthode après avoir lu le cas ici. article, et il y aura des choses plus excitantes. Veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée de l'enregistrement global et de l'enregistrement local

Comment gérer la compatibilité de la boîte de date et d'heure easyui dans IE

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!