这篇文章主要介绍了angular实现的table表格排序功能,结合完整实例形式分析了angularjs表格排序所涉及的事件响应、元素遍历、属性修改等相关操作技巧,需要的朋友可以参考下
本文实例讲述了Angular实现的table表格排序功能。分享给大家供大家参考，具体如下：
先来看看效果图：
完整代码如下：
- nbsp;html>
<span class="pln">www</span><span class="pun">.</span><span class="pln">jb51</span><span class="pun">.</span><span class="pln">net </span><span class="typ">Angular</span><span class="pun">表格排序</span> table{ border: 1px solid; text-align: center; width: 40%; height: 400px; } tr,td{ border: 1px solid; } tr:nth-child(2n){ background: gainsboro; } var app=angular.module("MyApp",[]); app.controller("demoC",["$scope",function($scope){ $scope.shop=[{ state1:false,id:9001,name:"iphoneX",username:"张三",tel:13525565588,price:8699,city:"北京",time:new Date('11-23 10:00:00'),state:"已发货"}, {state1:false,id:3007,name:"iphone6",username:"王红",tel:18524565588,price:5635,city:"郑州",time:new Date('11-23 11:38:20'),state:"已发货"}, {state1:false,id:5312,name:"iphone7",username:"赵小龙",tel:17545585598,price:6180,city:"北京",time:new Date('11-23 9:17:00'),state:"未发货"}, {state1:false,id:2132,name:"iphone8",username:"赵强",tel:17625565618,price:7190,city:"上海",time:new Date('11-23 10:40:00'),state:"未发货"} ]; $scope.ckAll=function(){ for(var i in $scope.shop){ $scope.shop[i].state1=$scope.ckall; } } $scope.del=function(){ for(var i=0; i<$scope.shop.length; i++){ if($scope.shop[i].state=="已发货"&&$scope.shop[i].state){ $scope.shop.splice(i,1); i--; } } } $scope.add=function(){ var sname=$scope.sname; var susername=$scope.susername; var stel=$scope.stel; var sprice=$scope.sprice; var scity=$scope.scity; if(sname==undefined || sname==""){ alert("用户名不能为空"); $("#s").css("border-color","red"); }else if(susername==undefined || susername==""){ alert("商品名不能为空"); $("#y").css("border-color","red"); }else if(stel==undefined || stel==""){ alert("手机号不能为空"); $("#t").css("border-color","red"); }else if(sprice==undefined || sprice==""){ alert("价格不能为空"); $("#p").css("border-color","red"); }else if(scity==undefined || scity==""){ alert("城市必须选择"); } else{ $scope.shop.push({name:sname,username:susername,tel:stel,price:sprice,city:scity}) $scope.toto=false; } } }]) 按状态查询 已发货 未发货
登录后复制 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}}
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
在vue中常用组件和框架结构（详细教程）
在vue中常用组件和框架结构（详细教程）
在vue中常用组件和框架结构（详细教程）
在vue中常用组件和框架结构（详细教程）
在vue中常用组件和框架结构（详细教程）
在vue中常用组件和框架结构（详细教程）
在vue中常用组件和框架结构（详细教程）
在vue中常用组件和框架结构（详细教程）
在vue中常用组件和框架结构（详细教程）
以上就是在Angular中如何实现table表格排序的详细内容，更多请关注【创想鸟】其它相关文章！
