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的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。