Comment implémenter la méthode d'ajout de tr à la table dans angulairejs

Ci-dessous, je vais partager avec vous un article sur la façon d'ajouter tr à une table dans angulairejs. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

Exigences :

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 instruction personnalisée

.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 règle.html est le contenu de l'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>

Pas besoin de changer, écrivez simplement ce que c'était à l'origine.

3 Réécrivez la partie de la 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>

Cela complétera nos exigences d'initialisation, mais vous pouvez légèrement modifier ce qui précède pour obtenir de meilleures fonctions. La ligne suivante peut être automatiquement réduite :

Ce qui précède est ce que j'ai compilé pour tout le monde, j'espère qu'il sera utile. vous à l'avenir. Tout le monde est utile.

Articles associés :

Comment implémenter le transfert de données, la modification et la mise à jour des composants parent-enfant dans Vue (tutoriel détaillé)

Comment modifier la valeur des accessoires dans un sous-composant vue2.0 et transmettre la valeur au composant parent

Comment implémenter un nouveau rendu complet lors de la modification dynamique des données dans un seul composant dans vue

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!