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 相关文章推荐
页面加载完毕后滚动条自动滚动一定位置
Feb 20 Javascript
js确认删除对话框适用于a标签及submit
Jul 10 Javascript
浅谈javascript中call()、apply()、bind()的用法
Apr 20 Javascript
JavaScript运动减速效果实例分析
Aug 04 Javascript
详解js跨域原理以及2种解决方案
Dec 09 Javascript
pm2 部署 node的三种方法示例
Oct 20 Javascript
three.js中文文档学习之如何本地运行详解
Nov 20 Javascript
JavaScript设计模式之建造者模式实例教程
Jul 02 Javascript
JS在if中的强制类型转换方式
Jul 15 Javascript
通过实例了解js函数中参数的传递
Jun 15 Javascript
vue-autoui自匹配webapi的UI控件的实现
Mar 20 Javascript
前端vue如何使用高德地图
Nov 05 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
使用gd库实现php服务端图片裁剪和生成缩略图功能分享
2013/12/25 PHP
Zend Framework教程之Zend_Config_Ini用法分析
2016/03/23 PHP
PHP使用http_build_query()构造URL字符串的方法
2016/04/02 PHP
Laravel实现短信注册的示例代码
2018/05/29 PHP
如何快速的呈现我们的网页的技巧整理
2007/07/01 Javascript
jQuery使用prepend()方法在元素前添加内容用法实例
2015/03/26 Javascript
JavaScript中的small()方法使用详解
2015/06/08 Javascript
最简单的JS实现json转csv的方法
2019/01/10 Javascript
详解iframe跨域的几种常用方法(小结)
2019/04/29 Javascript
原生js滑动轮播封装
2020/07/31 Javascript
[04:17]DOTA2完美盛典,rOtk、BurNIng携手巴图演唱《倔强》
2017/11/28 DOTA
详解Python的单元测试
2015/04/28 Python
Python网站验证码识别
2016/01/25 Python
python爬虫爬取淘宝商品信息(selenum+phontomjs)
2018/02/24 Python
对python自动生成接口测试的示例讲解
2018/11/30 Python
使用python批量化音乐文件格式转换的实例
2019/01/09 Python
Python 计算任意两向量之间的夹角方法
2019/07/05 Python
简单了解django orm中介模型
2019/07/30 Python
Pytorch中的variable, tensor与numpy相互转化的方法
2019/10/10 Python
浅谈Python type的使用
2019/11/19 Python
怀俄明州飞钓:Platte River Fly Shop
2017/12/28 全球购物
Vans荷兰官方网站:美国南加州的原创极限运动潮牌
2018/01/23 全球购物
Under Armour安德玛法国官网:美国高端运动科技品牌
2018/06/29 全球购物
澳大利亚办公室装修:JasonL Office Furniture
2019/06/25 全球购物
乌克兰在线药房:Аптека24
2019/10/30 全球购物
怎么写好自荐信
2013/10/30 职场文书
高中生职业规划范文
2014/03/09 职场文书
欢迎标语大全
2014/06/21 职场文书
学籍证明模板
2014/11/21 职场文书
实习介绍信范文
2015/05/05 职场文书
2015最新婚礼主持词
2015/06/30 职场文书
一文读懂go中semaphore(信号量)源码
2021/04/03 Golang
Python pygame实现中国象棋单机版源码
2021/06/20 Python
java解析XML详解
2021/07/09 Java/Android
如何解决goland,idea全局搜索快捷键失效问题
2022/04/03 Golang
windows系统安装配置nginx环境
2022/06/28 Servers