So implementieren Sie die Tabellensortierung in Angular
In diesem Artikel wird hauptsächlich die von Angular implementierte Tabellensortierungsfunktion vorgestellt und die Ereignisreaktion, das Durchlaufen von Elementen, die Attributänderung und andere damit verbundene Betriebsfähigkeiten in Form eines vollständigen Beispiels analysiert, auf das sich Freunde in Not beziehen können it
Das Beispiel in diesem Artikel beschreibt die von Angular implementierte Tabellensortierfunktion. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
Werfen wir zunächst einen Blick auf die Darstellungen:
Der vollständige Code lautet wie folgt :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>www.jb51.net 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>Oben habe ich es für alle zusammengestellt und hoffe, dass es in Zukunft für alle hilfreich sein wird.
Verwandte Artikel:
Gemeinsame Komponenten und Framework-Strukturen in Vue (ausführliches Tutorial)
So lösen Sie Tap in Fastclick-Code" Klicken Sie auf durch“
So implementieren Sie animierte Kontrollkästchen in anime.js
in Parcel.js + Vue 2.x So erreichen Sie eine extrem schnelle Null -Konfigurationsverpackung
So implementieren Sie eine Tabelle in Vue + Element-Paginierung
So implementieren Sie Aufnahme- und Wiedergabeaufzeichnungsfunktionen im WeChat-Miniprogramm
Nuxt.js-Framework (ausführliches Tutorial)
So implementieren Sie eine rollende Digitaluhr in JS+CSS
Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Tabellensortierung in Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1393
52
So sortieren Sie Fotos nach Aufnahmedatum in Windows 11/10
Feb 19, 2024 pm 08:45 PM
In diesem Artikel erfahren Sie, wie Sie Bilder nach Aufnahmedatum in Windows 11/10 sortieren und was zu tun ist, wenn Windows Bilder nicht nach Datum sortiert. In Windows-Systemen ist die ordnungsgemäße Organisation von Fotos von entscheidender Bedeutung, um das Auffinden von Bilddateien zu erleichtern. Benutzer können Ordner mit Fotos basierend auf verschiedenen Sortiermethoden wie Datum, Größe und Name verwalten. Darüber hinaus können Sie je nach Bedarf eine aufsteigende oder absteigende Reihenfolge festlegen, um Dateien flexibler zu organisieren. So sortieren Sie Fotos nach Aufnahmedatum in Windows 11/10. Um Fotos nach Aufnahmedatum in Windows zu sortieren, gehen Sie folgendermaßen vor: Öffnen Sie Bilder, Desktop oder einen beliebigen Ordner, in dem Sie Fotos ablegen. Klicken Sie im Menüband auf
So sortieren Sie E-Mails in Outlook nach Absender, Betreff, Datum, Kategorie und Größe
Feb 19, 2024 am 10:48 AM
Outlook bietet viele Einstellungen und Funktionen, die Ihnen helfen, Ihre Arbeit effizienter zu verwalten. Eine davon ist die Sortieroption, mit der Sie Ihre E-Mails nach Ihren Bedürfnissen kategorisieren können. In diesem Tutorial erfahren Sie, wie Sie die Sortierfunktion von Outlook verwenden, um E-Mails nach Kriterien wie Absender, Betreff, Datum, Kategorie oder Größe zu organisieren. Dies erleichtert Ihnen die Verarbeitung und das Auffinden wichtiger Informationen und steigert Ihre Produktivität. Microsoft Outlook ist eine leistungsstarke Anwendung, mit der Sie Ihre E-Mail- und Kalenderpläne ganz einfach zentral verwalten können. Sie können ganz einfach E-Mails senden, empfangen und organisieren, während die integrierte Kalenderfunktion es Ihnen erleichtert, den Überblick über Ihre bevorstehenden Ereignisse und Termine zu behalten. Wie man in Outloo ist
XML-Daten mit Python filtern und sortieren
Aug 07, 2023 pm 04:17 PM
Implementieren des Filterns und Sortierens von XML-Daten mit Python Einführung: XML ist ein häufig verwendetes Datenaustauschformat, das Daten in Form von Tags und Attributen speichert. Bei der Verarbeitung von XML-Daten müssen wir die Daten häufig filtern und sortieren. Python bietet viele nützliche Tools und Bibliotheken zum Verarbeiten von XML-Daten. In diesem Artikel wird erläutert, wie Sie mit Python XML-Daten filtern und sortieren. Lesen der XML-Datei Bevor wir beginnen, müssen wir die XML-Datei lesen. Python verfügt über viele XML-Verarbeitungsbibliotheken.
PHP-Entwicklung: So implementieren Sie Funktionen zum Sortieren und Paging von Tabellendaten
Sep 20, 2023 am 11:28 AM
PHP-Entwicklung: So implementieren Sie Sortier- und Paging-Funktionen für Tabellendaten. In der Webentwicklung ist die Verarbeitung großer Datenmengen eine häufige Aufgabe. Bei Tabellen, die große Datenmengen anzeigen müssen, ist es normalerweise erforderlich, Datensortierungs- und Paging-Funktionen zu implementieren, um eine gute Benutzererfahrung zu bieten und die Systemleistung zu optimieren. In diesem Artikel wird die Verwendung von PHP zum Implementieren der Sortier- und Paging-Funktionen von Tabellendaten vorgestellt und spezifische Codebeispiele gegeben. Die Sortierfunktion implementiert die Sortierfunktion in der Tabelle und ermöglicht Benutzern die Sortierung in aufsteigender oder absteigender Reihenfolge nach verschiedenen Feldern. Das Folgende ist ein Implementierungsformular
So installieren Sie Angular unter Ubuntu 24.04
Mar 23, 2024 pm 12:20 PM
Angular.js ist eine frei zugängliche JavaScript-Plattform zum Erstellen dynamischer Anwendungen. Es ermöglicht Ihnen, verschiedene Aspekte Ihrer Anwendung schnell und klar auszudrücken, indem Sie die Syntax von HTML als Vorlagensprache erweitern. Angular.js bietet eine Reihe von Tools, die Sie beim Schreiben, Aktualisieren und Testen Ihres Codes unterstützen. Darüber hinaus bietet es viele Funktionen wie Routing und Formularverwaltung. In dieser Anleitung wird erläutert, wie Angular auf Ubuntu24 installiert wird. Zuerst müssen Sie Node.js installieren. Node.js ist eine JavaScript-Ausführungsumgebung, die auf der ChromeV8-Engine basiert und es Ihnen ermöglicht, JavaScript-Code auf der Serverseite auszuführen. In Ub sein
C++-Programm: Ordnen Sie die Position von Wörtern in alphabetischer Reihenfolge neu
Sep 01, 2023 pm 11:37 PM
Bei diesem Problem wird eine Zeichenfolge als Eingabe angegeben und wir müssen die in der Zeichenfolge vorkommenden Wörter in lexikografischer Reihenfolge sortieren. Dazu weisen wir jedem Wort im String einen Index beginnend bei 1 zu (durch Leerzeichen getrennt) und erhalten die Ausgabe in Form sortierter Indizes. String={"Hello","World"}"Hello"=1 "World"=2 Da die Wörter in der Eingabezeichenfolge in lexikografischer Reihenfolge vorliegen, wird in der Ausgabe „12“ ausgegeben. Schauen wir uns einige Eingabe-/Ergebnisszenarien an – vorausgesetzt, alle Wörter in der Eingabezeichenfolge sind gleich, schauen wir uns die Ergebnisse an – Eingabe:{"hello","hello","hello"}Ergebnis:3 Erhaltenes Ergebnis
Wie sortiert die Methode Arrays.sort() in Java Arrays nach einem benutzerdefinierten Komparator?
Nov 18, 2023 am 11:36 AM
Wie sortiert die Methode Arrays.sort() in Java Arrays nach einem benutzerdefinierten Komparator? In Java ist die Methode Arrays.sort() eine sehr nützliche Methode zum Sortieren von Arrays. Standardmäßig sortiert diese Methode in aufsteigender Reihenfolge. Aber manchmal müssen wir das Array nach unseren eigenen definierten Regeln sortieren. Zu diesem Zeitpunkt müssen Sie einen benutzerdefinierten Komparator (Komparator) verwenden. Ein benutzerdefinierter Komparator ist eine Klasse, die die Comparator-Schnittstelle implementiert.
Winkelkomponenten und ihre Anzeigeeigenschaften: Nicht-Block-Standardwerte verstehen
Mar 15, 2024 pm 04:51 PM
Das Standardanzeigeverhalten für Komponenten im Angular-Framework gilt nicht für Elemente auf Blockebene. Diese Designwahl fördert die Kapselung von Komponentenstilen und ermutigt Entwickler, bewusst zu definieren, wie jede Komponente angezeigt wird. Durch explizites Festlegen der CSS-Eigenschaft display kann die Anzeige von Angular-Komponenten vollständig gesteuert werden, um das gewünschte Layout und die gewünschte Reaktionsfähigkeit zu erreichen.
