Angular实现的table表格排序功能完整示例

本文实例讲述了Angular实现的table表格排序功能。分享给大家供大家参考，具体如下：

先来看看效果图：

完整代码如下：

  
    
    
    
      table{
 border: 1px solid;
 text-align: center;
 width: 40%;
 height: 400px;
      }
      tr,td{
 border: 1px solid;
      }
      tr:nth-child(2n){
 background: gainsboro;
      }
    
    
    
    
  
  
    新增订单
    批量删除
    
    
    
      按状态查询
      已发货
      未发货
    
    

      

 

 
id排序
 
商品名
 
用户名
 
手机号
 
价格排序
 
城市
 
下单时间排序
 
状态
      
      

 

 
{{s.id}}
 
{{s.name}}
 
{{s.username}}
 
{{s.tel}}
 
{{s.price | currency:"￥"}}
 
{{s.city}}
 
{{s.time | date : 'MM-HH hh:dd:ss'}}
 
{{s.state}}
{{s.state}}
      
    
    
      
    
  

更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》

希望本文所述对大家AngularJS程序设计有所帮助。