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 相关文章推荐
javascript对象之内置对象Math使用方法
Apr 16 Javascript
JS常见问题之为什么点击弹出的i总是最后一个
Jan 05 Javascript
JavaScript基础教程——入门必看篇
May 20 Javascript
利用forever和pm2部署node.js项目过程
May 10 Javascript
js实现移动端轮播图效果
Dec 09 Javascript
基于twbsPagination.js分页插件使用心得(分享)
Oct 21 Javascript
Vue导出json数据到Excel电子表格的示例
Dec 04 Javascript
详解如何在vscode里面调试js和node.js的方法步骤
Dec 24 Javascript
详解vue-cli+element-ui树形表格(多级表格折腾小计)
Apr 17 Javascript
layui之table checkbox初始化时选中对应选项的方法
Sep 02 Javascript
基于JavaScript的数据结构队列动画实现示例解析
Aug 06 Javascript
一文彻底理解js原生语法prototype,__proto__和constructor
Oct 24 Javascript
关于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数组函数序列之array_push() 数组尾部添加一个或多个元素(入栈),返回新长度。
2011/11/07 PHP
php curl基本操作详解
2013/07/23 PHP
php实现的短网址算法分享
2014/06/20 PHP
destoon实现不同会员组公司名称显示不同的颜色的方法
2014/08/22 PHP
php写一个函数,实现扫描并打印出自定目录下(含子目录)所有jpg文件名
2017/05/26 PHP
有道JavaScript监听浏览器的问题
2010/06/23 Javascript
Javascript生成json的函数代码(可以用php的json_decode解码)
2012/06/11 Javascript
js通过地址栏给action传值(中文乱码全是问号)
2013/05/02 Javascript
JS对HTML标签select的获取、添加、删除操作
2013/10/17 Javascript
jquery中的查找parents与closest方法之间的区别
2013/12/02 Javascript
Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
2014/02/12 Javascript
优化Node.js Web应用运行速度的10个技巧
2014/09/03 Javascript
jquery实现上下左右滑动的方法
2015/02/09 Javascript
解决jQuery ajax请求在IE6中莫名中断的问题
2016/06/20 Javascript
jQuery EasyUI API 中文帮助文档和扩展实例
2016/08/01 Javascript
AngularJS通过ng-route实现基本的路由功能实例详解
2016/12/13 Javascript
JavaScript数组去重的6个方法
2017/01/21 Javascript
详解如何使用webpack打包Vue工程
2017/05/27 Javascript
Javascript生成器(Generator)的介绍与使用
2021/01/31 Javascript
python实现的udp协议Server和Client代码实例
2014/06/04 Python
Python中__init__和__new__的区别详解
2014/07/09 Python
Python实现扫描指定目录下的子目录及文件的方法
2014/07/16 Python
Python中的lstrip()方法使用简介
2015/05/19 Python
python用10行代码实现对黄色图片的检测功能
2015/08/10 Python
python中实现字符串翻转的方法
2018/07/11 Python
Python with用法:自动关闭文件进程
2019/07/10 Python
PyQt5使用QTimer实现电子时钟
2019/07/29 Python
python实现名片管理器的示例代码
2019/12/17 Python
在jupyter notebook中调用.ipynb文件方式
2020/04/14 Python
Python 如何对文件目录操作
2020/07/10 Python
英文求职信结束语大全
2013/10/26 职场文书
学校元旦晚会开场白
2014/12/14 职场文书
2016年小学生教师节广播稿
2015/12/18 职场文书
Tensorflow与RNN、双向LSTM等的踩坑记录及解决
2021/05/31 Python
Python 读取千万级数据自动写入 MySQL 数据库
2022/06/28 Python
SQLyog的下载、安装、破解、配置教程(MySQL可视化工具安装)
2022/09/23 MySQL