需求：

上面是一个桌子，运用了

tr ng-repeat=' formdata。规则列表中的规则按$索引跟踪'循环显示。现在的一个需求是：需要在每行添加一个字段，不过不能在同一行显示，需要在下一行显示。我首先想到了直接加个，不过没有办法换行。在下面再加个也不行。只能依赖强大的angulajs，自定义指令。下面我们就开始。

一自定义指令。指令(“kbnTableRow”，函数($ compile){ return { restrict : ' A '，link :函数(作用域，元素){ element。在(' tr ')之后；函数expressDescHtml(){ var detailHtml=' TD/tdtd col span=' 5 ' ' ' div ng-show='规则。打字！==1'' 'div class='col-xs-9 row ' ' '输入类型=' text ' class=' form-control ' ng-model=' rule。desc表达式'只读' ' ' '/div ' '/div ' '/TD '；返回detailHtml} }，TemplateURl : ' libs/KbNTable/table _ row/rule。html ' }；});2 rule.html是原来的里的内容

TD class=' form-control-static ' div class=' form-control-static ' { index $ 1 } }/div/tdtd div class=' form-control-static ' ng-show='规则。type===1 ' style=' text-align :-web kit-left；'{ {规则。右var。desc } }/div ng-show='规则。打字！==1' div class='col-xs-9 row '输入类型=' text ' class=' form-control ' ng-model=' rule。rightVar。desc的只读标题=' { { rule。rightVar。desc } } '/div class=' col-xs-3 '按钮class=' BTN BTN-警告' ng-click=' showRightVar(规则，' RightVar ')设置/button/div/div/tdtd class=' form-control-static ' ng-show=' form data。exec type=' t02 ' ' div class=' form-control-static ' style=' padding-top 3360 0；0 '输入类型=' text ' class=' form-control ' ng-model=' rule。score ' title=' { { rule。score } } '//div/tdtd class=' TD-button ' style=' padding-left : 0；填充-右： 1px按钮=' BTN BTN-危险' ng-click='德尔(规则)'删除/按钮输入类型='隐藏' ng-model='规则。enable/tdtd class=' TD-button ' style=' padd : 8px；“0”按钮类=“BTN BTN-危险”ng-click=“禁用规则(规则，$ event)”span ng-if=“规则”。使能==0 '启用/span span ng-if='rule.enable==1 '禁用/span /button/td不需要改变，原来是什么，这里就写什么。

3初始页面里的tr循环部分，用我们新建的指令改写：

“行”H4表达式设置/H4/div div class=' col-xs-12 ' div class=' row ' div class=' col-xs-10 ' table class=' table text-center ' tr th ng-click=' toggleAll()' I class=' fa discover-table-open-icon ' ng-class=' { ' fa-caret-down ' : formdata。on，' fa-caret-right':第{ 0 }/I/th个表单数据宽度='45px '序号/th左变量/th操作符/th右变量/th th宽度=' 75px ' ng-show=' formdata。exec type==' t02 ' '分值第/th列='2 '操作/th/th/tr t车身tr ng-repeat=' formdata。规则列表中的规则按$索引跟踪kbn-table-row class=' discover-table-row '/tr/t body/table/div class=' col-xs-1 '按钮=' BTN BTN-信息' ng-click=' addRule()'新增/按钮/div /div /div这样就可以完成我们的初始要求，不过可以在上面稍微改动下，会实现更棒的功能，下面一行可以自动收缩：

以上这篇开发实现桌子增加tr的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。