angularjs实现table增加tr的方法


Posted in Javascript onFebruary 27, 2018

需求:

angularjs实现table增加tr的方法

上面是一个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 class="col-xs-9 row">'
 + ' <input type="text" class="form-control" ng-model="rule.exprDesc"readonly ">'
+ '</div>'
+'</div>' + '</td>';
return detailHtml;
    }
  },
 templateUrl : 'libs/kbnTable/table_row/rule.html'
      };
     });

2 rule.html是原来的里的内容

<td class="form-control-static">
 <div class="form-control-static">{{$index+1}}</div>
</td>
<td>
 <div class="form-control-static" ng-show="rule.type===1"
  style="text-align: -webkit-left;">   {{rule.rightVar.desc}}</div>
 <div ng-show="rule.type!==1">
  <div class="col-xs-9 row">
   <input type="text" class="form-control" ng-model="rule.rightVar.desc"
    readonly title="{{rule.rightVar.desc}}">
  </div>
  <div class="col-xs-3 ">
   <button class="btn btn-warning"
    ng-click="showRightVar(rule,'rightVar')">设置</button>
  </div>
 </div>
</td>
<td class="form-control-static" ng-show="formData.execType == 't02'">
 <div class="form-control-static" style="padding-top: 0;">
  <input type="text" class="form-control" ng-model="rule.score"
   title="{{rule.score}}" />
 </div>
</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>

不需要改变,原来是什么,这里就写什么。

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

<div class="row">
   <div class="col-xs-12 row">
    <h4 class="col-xs-12">
     <b>表达式设置</b>
    </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': !formData.on }"> 
          </i>
        </th>
        <th width="45px">序号</th>
        <th>左变量</th>
        <th>操作符</th>
        <th>右变量</th>
        <th width="75px" 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 class="discover-table-row"></tr>
       </tbody>
      </table>
     </div>
     <div class="col-xs-1">
      <button class="btn btn-info" ng-click="addRule()">新增</button>
     </div>
    </div>
   </div>

这样就可以完成我们的初始要求,不过可以在上面稍微改动下,会实现更棒的功能,下面一行可以自动收缩:

angularjs实现table增加tr的方法

以上这篇angularjs实现table增加tr的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 图片缩放(按比例)控制代码
May 27 Javascript
使用js判断TextBox控件值改变然后出发事件
Mar 07 Javascript
使用js画图之饼图
Jan 12 Javascript
JavaScript常用脚本汇总(三)
Mar 04 Javascript
JavaScript基本的输出和嵌入式写法教程
Oct 20 Javascript
javascript DIV实现跟随鼠标移动
Mar 19 Javascript
深入探究JavaScript中for循环的效率问题及相关优化
Mar 13 Javascript
Vue Cli与BootStrap结合实现表格分页功能
Aug 18 Javascript
如何为你的JavaScript代码日志着色详解
Apr 08 Javascript
element-ui 文件上传修改文件名的方法示例
Nov 05 Javascript
JS+JQuery实现无缝连接轮播图
Dec 30 jQuery
jQuery实现购物车全功能
Jan 11 jQuery
关于redux-saga中take使用方法详解
Feb 27 #Javascript
浅析Visual Studio Code断点调试Vue
Feb 27 #Javascript
angularJs 表格添加删除修改查询方法
Feb 27 #Javascript
ExtJs整合Echarts的示例代码
Feb 27 #Javascript
angularJS实现动态添加,删除div方法
Feb 27 #Javascript
浅谈React中的元素、组件、实例和节点
Feb 27 #Javascript
AngularJS动态添加数据并删除的实例
Feb 27 #Javascript
You might like
PHP使用strtotime获取上个月、下个月、本月的日期
2015/12/30 PHP
对比分析php中Cookie与Session的异同
2016/02/19 PHP
php简单获取复选框值的方法
2016/05/11 PHP
TP5多入口设置实例讲解
2020/12/15 PHP
jQuery formValidator表单验证插件开源了 含API帮助、源码、示例
2008/08/14 Javascript
为radio类型的INPUT添加客户端脚本(附加实现JS来禁用onClick事件思路代码)
2010/11/11 Javascript
jQuery Tools Dateinput使用介绍
2012/07/14 Javascript
jQuery 浮动导航菜单适合购物商品类型的网站
2014/09/09 Javascript
javascript制作的滑动图片菜单
2015/05/15 Javascript
js+CSS实现模拟华丽的select控件下拉菜单效果
2015/09/01 Javascript
js中substring和substr两者区别和使用方法
2015/11/09 Javascript
超实用的javascript时间处理总结
2016/08/16 Javascript
jQuery DateTimePicker 日期和时间插件示例
2017/01/22 Javascript
ECMAscript 变量作用域总结概括
2017/08/18 Javascript
详谈commonjs模块与es6模块的区别
2017/10/18 Javascript
AngularJS 实现购物车全选反选功能
2017/10/24 Javascript
用Node提供静态文件服务的方法
2018/07/06 Javascript
JS实现无限轮播无倒退效果
2020/09/21 Javascript
[00:55]2015国际邀请赛中国区预选赛5月23日——28日约战上海
2015/05/25 DOTA
[01:36:19]Secret vs NB 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
一个计算身份证号码校验位的Python小程序
2014/08/15 Python
在Python 2.7即将停止支持时,我们为你带来了一份python 3.x迁移指南
2018/01/30 Python
python3实现微型的web服务器
2019/09/03 Python
python读写数据读写csv文件(pandas用法)
2020/12/14 Python
CSS3 网页下拉菜单代码解释 中文翻译
2010/02/27 HTML / CSS
移动HTML5前端框架—MUI的使用
2017/12/18 HTML / CSS
Lulu & Georgia官方网站:购买地毯、家具、抱枕、壁纸、床上用品等
2018/03/19 全球购物
澳大利亚办公室装修:JasonL Office Furniture
2019/06/25 全球购物
优秀毕业生事迹材料
2014/02/12 职场文书
《骆驼和羊》教学反思
2014/02/27 职场文书
卫生巾广告词
2014/03/18 职场文书
目标责任书范文
2014/04/14 职场文书
2014年机关党委工作总结
2014/12/11 职场文书
2014年优秀班主任工作总结
2014/12/16 职场文书
工作自我评价范文
2015/03/05 职场文书
第二次离婚起诉书
2015/05/18 职场文书