上面是一个table，运用了
<tr ng-repeat="rule in formData.ruleList track by $index">
循环显示。现在的一个需求是：需要在每行添加一个字段，不过不能在同一行显示，需要在下一行显示。我首先想到了直接加个,不过没有办法换行。在下面再加个也不行。只能依赖强大的angulajs，自定义指令。下面我们就开始。
1 自定义指令
.directive( 'kbnTableRow', function($compile) { return { restrict : 'A', link : function(scope, element) { element.after('<tr>'); function expressDescHtml() { var detailHtml = '<td></td><td colspan="5">' + '<div ng-show="rule.type!==1">' + '<div>' + ' <input type="text" ng-model="rule.exprDesc"readonly ">' + '</div>' +'</div>' + '</td>'; return detailHtml; } }, templateUrl : 'libs/kbnTable/table_row/rule.html' }; });
2 rule.html是原来的里的内容
<td> <div>{{$index+1}}</div> </td> <td> <div ng-show="rule.type===1">   {{rule.rightVar.desc}}</div> <div ng-show="rule.type!==1"> <div> <input type="text" ng-model="rule.rightVar.desc" readonly title="{{rule.rightVar.desc}}"> </div> <div> <button ng-click="showRightVar(rule,'rightVar')">设置</button> </div> </div> </td> <td ng-show="formData.execType == 't02'"> <div> <input type="text" ng-model="rule.score" title="{{rule.score}}" /> </div> </td> <td> <button ng-click="del(rule)">删除</button> <input type="hidden" ng-model="rule.enable" /> </td> <td> <button ng-click="disabledRule(rule, $event)"> <span ng-if="rule.enable == 0">启用</span> <span ng-if="rule.enable == 1">禁用</span> </button> </td>
不需要改变，原来是什么，这里就写什么。
3 初始页面里的tr循环部分，用我们新建的指令改写：
<div> <div> <h4> <b>表达式设置</b> </h4> </div> <div> <div> <div> <table> <tr> <th ng-click="toggleAll()"> <i ng-class="{ 'fa-caret-down': formData.on, 'fa-caret-right': !formData.on }"> </i> </th> <th>序号</th> <th>左变量</th> <th>操作符</th> <th>右变量</th> <th ng-show="formData.execType == 't02'">分值</th> <th colspan="2">操作</th> <th></th> </tr> <tbody> <tr ng-repeat="rule in formData.ruleList track by $index" kbn-table-row></tr> </tbody> </table> </div> <div> <button ng-click="addRule()">新增</button> </div> </div> </div>
这样就可以完成我们的初始要求，不过可以在上面稍微改动下，会实现更棒的功能，下面一行可以自动收缩：
以上这篇angularjs实现table增加tr的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章: