English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Dieser Artikel beschreibt die Implementierung der Tabelle sortieren-Funktion in Angular. Hiermit teile ich es mit Ihnen zur Referenz, wie folgt:
Lassen Sie uns zunächst das Ergebnisbild betrachten:
Das vollständige Codebeispiel ist wie folgt:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">-8" /><br
<title>de.oldtoolbag.com Angular-Tabelle sortieren</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" ></skript>
<script type="text/javascript" src="js/jquery-1.9.1.min.js" ></skript>
<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;
falls(sname==undefined || sname==""){
alert("Benutzername darf nicht leer sein");
$("#s").css("rand-farbe","rot");
}sonst falls(susername==undefined || susername==""){
alert("Produktname darf nicht leer sein");
$("#y").css("rand-farbe","rot");
}sonst falls(stel==undefined || stel==""){
alert("Telefonnummer darf nicht leer sein");
$("#t").css("rand-farbe","rot");
}sonst falls(sprice==undefined || sprice==""){
alert("Preis darf nicht leer sein");
$("#p").css("rand-farbe","rot");
}sonst falls(scity==undefined || scity==""){
alert("Stadt muss ausgewählt werden");
}
sonst{
$scope.shop.push({name:sname,benutzername:susername,telefonnummer:stel,preis:sprice,stadt:scity})
$scope.toto=false;
}
}
})
</skript>
</kopf>
<body ng-anwendung="MyApp" ng-steuerung="demoC">
>-klick="toto=true" stil="hintergrund-farbe: gelbgelb;">Neuer Auftrag</button>Save<
>-klick="del()" stil="hintergrund-farbe: gelbgelb;">Massenlöschen</button>Save<
<input typ="text" placeholder="Nach Produktname suchen" ng-modell="auswahlnamen" /><br
<input typ="text" placeholder="Nach Telefonnummer suchen" ng-modell="auswahltelefonnummer"/><br
auswählen ng-modell="auswahlstatus">
<option wert="">Nach Status suchen</<option value="Zhengzhou">Zhengzhou<
<option wert="versandt">versandt</<option value="Zhengzhou">Zhengzhou<
<option wert="nicht versandt">nicht versandt</<option value="Zhengzhou">Zhengzhou<
</auswählen>
<table zellenabstand="0px" zeilenabstand="0px">
<tr style="background}}-color: grau;">
<td><input type="checkbox" ng-model="ckall" ng-click="ckAll()"></td>
<td>id<button ng-click="px='id';flag=!flag" style="background-color: gelbgrün;">Sortieren</button></td>
<td>Produktname</td>
<td>Benutzername</td>
<td>Telefonnummer</td>
<td>Preis<button ng-click="px='price';flag=!flag" style="background-color: gelbgrün;">Sortieren</button></td>
<td>Stadt</td>
<td>Bestellzeit<button ng-click="px='time';flag=!flag" style="background-color: gelbgrün;">Sortieren</button></td>
<td>Status</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:mm:ss}}</td>
<td><span ng-show="s.state=='Versandfertig'" style="color: gelbgrün;">{{s.state}}</span>
<span ng-show="s.state=='Nicht versandt'" style="color: gelb;"><a href="#" rel="externer Link, nicht verfolgen" ng-click="s.state='Versandfertig'">{{s.state}}</a></span></td>
</tr>
</table>
<div style="Marge-top: 50px; Marge-left: 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 content related to 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.
Declaration: 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. This website does not own the copyright, does not edit the content manually, and does not bear relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (When sending an email, please replace # with @ to report, and provide relevant evidence. Once verified, this site will immediately delete the content suspected of infringement.)