English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
本文实例讲述了Angular实现的table表格排序功能。分享给大家供大家参考，具体如下：
V我们先来看看效果图：
Vrai code suivant :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>fr.oldtoolbag.com Angular trieu tạp bảng sắp xếp</title>
<style>
table{
border: 1px solide;
text-align: center;
width: 40%;
height: 400px;
}
tr,td{
border: 1px solide;
}
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("Le nom d'utilisateur ne peut pas être vide");
$("#s").css("border-color","red");
})else if(susername==undefined || susername==""){
alert("Le nom du produit ne peut pas être vide");
$("#y").css("border-color","red");
})else if(stel==undefined || stel==""){
alert("Le numéro de téléphone ne peut pas être vide");
$("#t").css("border-color","red");
})else if(sprice==undefined || sprice==""){
alert("Le prix ne peut pas être vide");
$("#p").css("border-color","red");
}else if(scity==undefined || scity==""){
alert("La ville doit être sélectionnée");
}
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;">Nouvel ordre</button>
<button ng-click="del()" style="background-color: greenyellow;">Suppression en lots</button>
<input type="text" placeholder="Recherche par nom de produit" ng-model="selname" />
<input type="text" placeholder="Recherche par numéro de téléphone" ng-model="seltel"/>
select ng-model="selstate">
<option value="">Recherche par état</option>
<option value="已发货">Déjà expédié</option>
<option value="未发货">Non expédié</option>
</select>
<table cellpadding="0px" cellspacing="0px">
<tr style="fond}}-couleur: gris;">
<td><input type="checkbox" ng-model="ckall" ng-click="ckAll()"></td>
<td>id<bouton ng-click="px='id';flag=!flag" style="fond-couleur: jaune vert;">Trier</bouton></td>
<td>Nom du produit</td>
<td>Nom d'utilisateur</td>
<td>Numéro de téléphone</td>
<td>Prix<bouton ng-click="px='price';flag=!flag" style="fond-couleur: jaune vert;">Trier</bouton></td>
<td> Ville</td>
<td>Heure de commande<bouton ng-click="px='time';flag=!flag" style="fond-couleur: jaune vert;">Trier</bouton></td>
<td>État</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=='expédié'" style="couleur: jaune vert;">{{s.state}}</span>
<span ng-show="s.state=='non expédié'" style="couleur: jaune;"><a href="#" rel="external nofollow" ng-click="s.state='expédié'">{{s.state}}</a></span></td>
</tr>
</table>
<div style="marge-haut: 50px; marge-left: 100px;">
<form ng-show="toto">
nom du produit : <input type="text" / ng-model="sname" id="s"><br /><br />
nom d'utilisateur : <input type="text" ng-model="susername"id="y"/><br /><br />
numéro de téléphone : <input type="text" ng-model="stel" id="t"/><br /><br />
prix : <input type="text" ng-model="sprice" id="p"/><br /><br />
ville : <select ng-model="scity">
<option value="">--choisir une ville--</option>
<option value="Beijing">Beijing</option>
<option value="Shanghai">Shanghai</option>
<option value="Zhengzhou">Zhengzhou</option>
</select><br /><br />
<button ng-click="add()">enregistrer</button>
</form>
</div>
</body>
</html>
Pour ceux qui sont intéressés par plus de contenu sur AngularJS, vous pouvez consulter les thèmes spéciaux de ce site : 'Résumé des techniques de manipulation des instructions AngularJS', 'Tutoriel d'initiation et d'approfondissement AngularJS' et 'Résumé de l'architecture MVC AngularJS'.
J'espère que cette explication aidera à la conception des programmes AngularJS.
Déclaration : Le contenu de cet article est extrait du réseau, propriété de l'auteur original, mis en ligne par les utilisateurs d'Internet spontanément. Ce site ne détient pas de droits de propriété, n'a pas été édité par l'homme, et n'assume aucune responsabilité juridique. Si vous trouvez du contenu présumé violer les droits d'auteur, veuillez envoyer un email à : notice#oldtoolbag.com (au moment de l'envoi d'un email, veuillez remplacer # par @ pour signaler un abus, et fournir des preuves pertinentes. Une fois vérifié, ce site supprimera immédiatement le contenu présumé enfreindre les droits d'auteur.)