这次给大家带来angular操作table表格使其排序，angular操作table表格使其排序的注意事项有哪些，下面就是实战案例，一起来看一下。
完整代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title> angular表格排序</title>
<style>
table{
border: 1px solid;
text-align: center;
width: 40%;
height: 400px;
}
tr,td{
border: 1px solid;
}
tr:nth-child(2n){
background: gainsboro;
}
</style>
<script type="text/javascript" src="js/angular.min.js" ></script>
<script type="text/javascript" src="js/jquery-1.9.1.min.js" ></script>
<script>
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;
}
}
}])
</script>
</head>
<body ng-app="myapp" ng-controller="democ">
<button ng-click="toto=true" style="background-color: greenyellow;">新增订单</button>
<button ng-click="del()" style="background-color: greenyellow;">批量删除</button>
<input type="text" placeholder="按商品名称查询" ng-model="selname" />
<input type="text" placeholder="按手机号查询" ng-model="seltel"/>
<select ng-model="selstate">
<option value="">按状态查询</option>
<option value="已发货">已发货</option>
<option value="未发货">未发货</option>
</select>
<table cellpadding="0px" cellspacing="0px">
<tr style="background-color: gray;">
<td><input type="checkbox" ng-model="ckall" ng-click="ckall()"></td>
<td>id<button ng-click="px='id';flag=!flag" style="background-color: greenyellow;">排序</button></td>
<td>商品名</td>
<td>用户名</td>
<td>手机号</td>
<td>价格<button ng-click="px='price';flag=!flag" style="background-color: greenyellow;">排序</button></td>
<td>城市</td>
<td>下单时间<button ng-click="px='time';flag=!flag" style="background-color: greenyellow;">排序</button></td>
<td>状态</td>
</tr>
<tr ng-repeat="s in shop | filter:{name:selname} | filter:{tel:seltel} | filter:{state:selstate} | orderby:px:flag ">
<td><input type="checkbox" ng-model="s.state1"></td>
<td>{{s.id}}</td>
<td>{{s.name}}</td>
<td>{{s.username}}</td>
<td>{{s.tel}}</td>
<td>{{s.price | currency:￥}}</td>
<td>{{s.city}}</td>
<td>{{s.time | date : 'mm-hh hh:dd:ss'}}</td>
<td><span ng-show="s.state=='已发货'" style="color: greenyellow;">{{s.state}}</span>
<span ng-show="s.state=='未发货'" style="color: yellow;"><a href="#" rel="external nofollow" ng-click="s.state='已发货'">{{s.state}}</a></span></td>
</tr>
</table>
<p style="margin-top: 50px; margin-left: 100px;">
<form ng-show="toto">
商品名：<input type="text" / ng-model="sname" id="s"><br /><br />
用户名：<input type="text" ng-model="susername"id="y"/><br /><br />
手机号：<input type="text" ng-model="stel" id="t"/><br /><br />
价格为：<input type="text" ng-model="sprice" id="p"/><br /><br />
城市：<select ng-model="scity">
<option value="">--选择城市--</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="郑州">郑州</option>
</select><br /><br />
<button ng-click="add()">保存</button>
</form>
</p>
</body>
</html>
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
以上就是angular操作table表格使其排序的详细内容。