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代码
Oct 19 Javascript
jquery选择checked在ie8普通模式下的问题
Feb 12 Javascript
浅析Javascript中bind()方法的使用与实现
Apr 29 Javascript
jQuery添加和删除输入文本框标签代码
May 20 Javascript
Node.js利用Net模块实现多人命令行聊天室的方法
Dec 23 Javascript
Ajax和Comet技术总结
Feb 19 Javascript
Angular1.x自定义指令实例详解
Mar 01 Javascript
jQuery实现注册会员时密码强度提示信息功能示例
Sep 05 jQuery
vue项目中axios使用详解
Feb 07 Javascript
vue-quill-editor富文本编辑器简单使用方法
Sep 21 Javascript
在js代码拼接dom对象到页面上的模板总结
Oct 21 Javascript
vue-better-scroll 的使用实例代码详解
Dec 03 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
《星际争霸II》全新指挥官斯台特曼现已上线
2020/03/08 星际争霸
php array_slice函数的使用以及参数详解
2008/08/30 PHP
php的urlencode()URL编码函数浅析
2011/08/09 PHP
php实现建立多层级目录的方法
2014/07/19 PHP
在你的网页中嵌入外部网页的方法
2007/04/02 Javascript
event.keyCode键码值表 附只能输入特定的字符串代码
2009/05/15 Javascript
javascript 基础篇1 什么是js 建立第一个js程序
2012/03/14 Javascript
JS Date函数整理方便使用
2013/10/23 Javascript
一个非常全面的javascript URL解析函数和分段URL解析方法
2014/04/12 Javascript
javascript在网页中实现读取剪贴板粘贴截图功能
2014/06/07 Javascript
thinkphp 表名 大小写 窍门
2015/02/01 Javascript
JavaScript获取各大浏览器信息图示
2015/11/20 Javascript
JS实现table表格数据排序功能(可支持动态数据+分页效果)
2016/05/26 Javascript
Angular外部使用js调用Angular控制器中的函数方法或变量用法示例
2016/08/05 Javascript
JS获取和修改元素样式的实例代码
2016/08/06 Javascript
JS中用childNodes获取子元素换行会产生一个子元素
2016/12/08 Javascript
angular分页指令操作
2017/01/09 Javascript
Vue.js -- 过滤器使用总结
2017/02/18 Javascript
JavaScript数据结构学习之数组、栈与队列
2017/05/02 Javascript
vue学习笔记之指令v-text &amp;&amp; v-html &amp;&amp; v-bind详解
2017/05/12 Javascript
Bootstrap 树控件使用经验分享(图文解说)
2017/11/06 Javascript
vuejs router history 配置到iis的方法
2018/09/20 Javascript
关于JS模块化的知识点分享
2019/10/16 Javascript
基于JavaScript实现贪吃蛇游戏
2020/03/16 Javascript
jQuery实现本地存储
2020/12/22 jQuery
[00:57]辉夜杯战队访谈宣传片—VG
2015/12/25 DOTA
[02:56]DOTA2上海特锦赛小组赛解说FreeAgain采访花絮
2016/02/27 DOTA
python自然语言编码转换模块codecs介绍
2015/04/08 Python
Python实现二叉搜索树
2016/02/03 Python
python好玩的项目—色情图片识别代码分享
2017/11/07 Python
python 进程池pool使用详解
2020/10/15 Python
英国现代、当代和设计师家具店:Furntastic
2020/07/18 全球购物
岗位职责风险点
2014/03/12 职场文书
食品流通安全承诺书
2014/05/22 职场文书
质量管理标语
2014/06/12 职场文书
毕业实习证明范本
2015/06/16 职场文书