English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
This article describes the table sorting function implemented by Angular. Shared for everyone's reference, as follows:
Let's take a look at the effect diagram first:
The complete code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" /><br
<title>www.oldtoolbag.com Angular table sorting</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("Username cannot be empty");
$("#s").css("border-color","red");
})else if(susername==undefined || susername==""){
alert("Product name cannot be empty");
$("#y").css("border-color","red");
})else if(stel==undefined || stel==""){
alert("Phone number cannot be empty");
$("#t").css("border-color","red");
})else if(sprice==undefined || sprice==""){
alert("Price cannot be empty");
$("#p").css("border-color","red");
}else if(scity==undefined || scity==""){
alert("City must be selected");
}
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">
>-click="toto=true" style="background-color: greenyellow;">New order</button>Save<
>-click="del()" style="background-color: greenyellow;">Batch delete</button>Save<
<input type="text" placeholder="Search by product name" ng-model="selname" /><br
<input type="text" placeholder="Search by phone number" ng-model="seltel"/><br
select ng-model="selstate">
<option value="">Search by status</<option value="Zhengzhou">Zhengzhou<
<option value="已发货">已发货</<option value="Zhengzhou">Zhengzhou<
<option value="未发货">未发货</<option value="Zhengzhou">Zhengzhou<
</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;">Sort</button></td>
<td>Product Name</td>
<td>Username</td>
<td>Phone Number</td>
<td>Price<button ng-click="px='price';flag=!flag" style="background-color: greenyellow;">Sort</button></td>
<td>City</td>
<td>Order Time<button ng-click="px='time';flag=!flag" style="background-color: greenyellow;">Sort</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>
<div style="margin-top: 50px; margin-} 10left:
0px;">-<form ng
show="toto"> / Product Name:<input type="text"-ng /select><br /><br
model="sname" id="s"><br-Username:<input type="text" ng/select><br /select><br /><br
model="susername"id="y"-Phone Number:<input type="text" ng/select><br /select><br /><br
model="stel" id="t"-Price:<input type="text" ng/select><br /select><br /><br
model="sprice" id="p"-City:<select ng
model="scity">--<option value="">--</<option value="Zhengzhou">Zhengzhou<
Select City/<option value="Zhengzhou">Zhengzhou<
<option value="Beijing">Beijing</<option value="Zhengzhou">Zhengzhou<
<option value="Shanghai">Shanghai</<option value="Zhengzhou">Zhengzhou<
</option> /select><br /><br
>-<button ng/button>Save<
</form>
</div>
</body>
</html>
Readers who are interested in more about AngularJS can check the special topics on this site: 'Summary of AngularJS Directive Operation Skills', 'AngularJS Beginner and Advanced Tutorial', and 'Summary of AngularJS MVC Architecture'.
I hope the content described in this article will be helpful to everyone's AngularJS program design.
Statement: The content of this article is from the Internet, the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously, and this website does not own the copyright. It has not been manually edited and does not assume any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#w3Please report via email to codebox.com (replace # with @ when sending an email) and provide relevant evidence. Once verified, this site will immediately delete the infringing content.