angularjs实现table增加tr的方法

需求：

上面是一个table，运用了

循环显示。现在的一个需求是：需要在每行添加一个字段，不过不能在同一行显示，需要在下一行显示。我首先想到了直接加个,不过没有办法换行。在下面再加个也不行。只能依赖强大的angulajs，自定义指令。下面我们就开始。

1 自定义指令

.directive(
   'kbnTableRow',
   function($compile) {
    return {
    restrict : 'A',
    link : function(scope, element) {
    element.after('');
   function expressDescHtml() {
   var detailHtml = ''
   + ''
    + ''
 + ' '
+ ''
+'' + '';
return detailHtml;
    }
  },
 templateUrl : 'libs/kbnTable/table_row/rule.html'
      };
     });

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

 {{$index+1}}


    {{rule.rightVar.desc}}
 
  
   
  
  
   设置
  
 


 
  
 


 删除 


 
  启用 禁用
 

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

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

   
    

     表达式设置
    
   
   
    
     
      


 

    
   
 
 
序号
 
左变量
 
操作符
 
右变量
 
分值
 
操作
 



 


      
     
     
      新增
     
    
   

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

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