How to implement the method of adding tr to table in angularjs

Below I will share with you an article on how to add tr to a table in angularjs. It has a good reference value and I hope it will be helpful to everyone.

Requirements:

The above is a table using a

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

loop show. One of the current requirements is that a field needs to be added to each row, but it cannot be displayed on the same row and needs to be displayed on the next row. I first thought of adding it directly, but there was no way to change the line. It won't do to add another one below. You can only rely on powerful angulajs and custom instructions. Let’s get started.

1 Custom instructions

.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 is the original content

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

No need to change, just write what it was originally.

3 The tr loop part in the initial page is rewritten with our new command:

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

This way we can complete our initial requirements. However, you can slightly modify the above to achieve better functions. The following line can be automatically shrunk:

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future. help.

Related articles:

How to implement data transfer, modification and update of parent-child components in Vue (detailed tutorial)

How to change the props value in the vue2.0 subcomponent and pass the value to the parent component

How to implement all re-rendering when dynamically modifying data in a single component in vue

The above is the detailed content of How to implement the method of adding tr to table in angularjs. For more information, please follow other related articles on the PHP Chinese website!