Comment implémenter le tri de table dans Angular
Cet article présente principalement la fonction de tri de table implémentée par Angular et analyse la réponse aux événements, le parcours des éléments, la modification des attributs et d'autres compétences opérationnelles connexes impliquées dans le tri de table AngularJS sous la forme d'un exemple complet auquel les amis dans le besoin peuvent se référer. it
L'exemple de cet article décrit la fonction de tri de table implémentée par Angular. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :
Jetons d'abord un coup d'œil aux rendus :
Le code complet est le suivant :
<!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>Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.
Articles associés :
Composants communs et structures de framework dans vue (tutoriel détaillé)
Comment résoudre le tap dans le code fastclick" Cliquez à travers”
Comment implémenter une case à cocher animée dans anime.js
dans Parcel.js + Vue 2.x Comment atteindre un zéro extrêmement rapide -package de configuration
Le problème que le navigateur ne peut pas déclencher avantRouteLeave lors de l'utilisation de Vue
Comment implémenter une table dans vue + élément Pagination
Comment implémenter les fonctions d'enregistrement et de lecture dans le mini programme WeChat
Framework Nuxt.js (tutoriel détaillé)
Comment implémenter une horloge numérique roulante en JS+CSS
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Comment trier les photos par date prise sous Windows 11/10
Feb 19, 2024 pm 08:45 PM
Cet article explique comment trier les images en fonction de la date de prise de vue dans Windows 11/10 et explique également ce qu'il faut faire si Windows ne trie pas les images par date. Dans les systèmes Windows, organiser correctement les photos est crucial pour faciliter la recherche des fichiers image. Les utilisateurs peuvent gérer des dossiers contenant des photos en fonction de différentes méthodes de tri telles que la date, la taille et le nom. De plus, vous pouvez définir l'ordre croissant ou décroissant selon vos besoins pour organiser les fichiers de manière plus flexible. Comment trier les photos par date de prise sous Windows 11/10 Pour trier les photos par date de prise sous Windows, procédez comme suit : Ouvrez Images, Bureau ou tout dossier dans lequel vous placez des photos. Dans le menu du ruban, cliquez sur
Comment trier les e-mails par expéditeur, sujet, date, catégorie, taille dans Outlook
Feb 19, 2024 am 10:48 AM
Outlook propose de nombreux paramètres et fonctionnalités pour vous aider à gérer votre travail plus efficacement. L’une d’elles est l’option de tri qui vous permet de classer vos emails en fonction de vos besoins. Dans ce didacticiel, nous allons apprendre à utiliser la fonction de tri d'Outlook pour organiser les e-mails en fonction de critères tels que l'expéditeur, l'objet, la date, la catégorie ou la taille. Cela vous permettra de traiter et de trouver plus facilement des informations importantes, ce qui vous rendra plus productif. Microsoft Outlook est une application puissante qui facilite la gestion centralisée de vos plannings de messagerie et de calendrier. Vous pouvez facilement envoyer, recevoir et organiser des e-mails, tandis que la fonctionnalité de calendrier intégrée facilite le suivi de vos événements et rendez-vous à venir. Comment être dans Outloo
Filtrage et tri des données XML à l'aide de Python
Aug 07, 2023 pm 04:17 PM
Implémentation du filtrage et du tri des données XML à l'aide de Python Introduction : XML est un format d'échange de données couramment utilisé qui stocke les données sous forme de balises et d'attributs. Lors du traitement de données XML, nous devons souvent filtrer et trier les données. Python fournit de nombreux outils et bibliothèques utiles pour traiter les données XML. Cet article explique comment utiliser Python pour filtrer et trier les données XML. Lecture du fichier XML Avant de commencer, nous devons lire le fichier XML. Python possède de nombreuses bibliothèques de traitement XML,
Développement PHP : Comment implémenter les fonctions de tri et de pagination des données des tables
Sep 20, 2023 am 11:28 AM
Développement PHP : comment implémenter des fonctions de tri et de pagination des données de table Dans le développement Web, le traitement de grandes quantités de données est une tâche courante. Pour les tableaux devant afficher une grande quantité de données, il est généralement nécessaire de mettre en œuvre des fonctions de tri et de pagination des données pour offrir une bonne expérience utilisateur et optimiser les performances du système. Cet article explique comment utiliser PHP pour implémenter les fonctions de tri et de pagination des données de table et donne des exemples de code spécifiques. La fonction de tri implémente la fonction de tri dans le tableau, permettant aux utilisateurs de trier par ordre croissant ou décroissant selon différents champs. Ce qui suit est un formulaire de mise en œuvre
Comment installer Angular sur Ubuntu 24.04
Mar 23, 2024 pm 12:20 PM
Angular.js est une plateforme JavaScript librement accessible pour créer des applications dynamiques. Il vous permet d'exprimer rapidement et clairement divers aspects de votre application en étendant la syntaxe HTML en tant que langage de modèle. Angular.js fournit une gamme d'outils pour vous aider à écrire, mettre à jour et tester votre code. De plus, il offre de nombreuses fonctionnalités telles que le routage et la gestion des formulaires. Ce guide expliquera comment installer Angular sur Ubuntu24. Tout d’abord, vous devez installer Node.js. Node.js est un environnement d'exécution JavaScript basé sur le moteur ChromeV8 qui vous permet d'exécuter du code JavaScript côté serveur. Être à Ub
Programme C++ : réorganiser la position des mots par ordre alphabétique
Sep 01, 2023 pm 11:37 PM
Dans ce problème, une chaîne est donnée en entrée et nous devons trier les mots apparaissant dans la chaîne par ordre lexicographique. Pour ce faire, nous attribuons un index commençant à 1 à chaque mot de la chaîne (séparés par des espaces) et obtenons le résultat sous forme d'index triés. String={"Hello","World"}"Hello"=1 "World"=2 Puisque les mots dans la chaîne d'entrée sont dans l'ordre lexicographique, la sortie imprimera "12". Examinons quelques scénarios d'entrée/résultat - en supposant que tous les mots de la chaîne d'entrée sont identiques, regardons les résultats - Entrée :{"hello","hello","hello"}Résultat : 3 Résultat obtenu
Comment la méthode Arrays.sort() en Java trie-t-elle les tableaux par comparateur personnalisé ?
Nov 18, 2023 am 11:36 AM
Comment la méthode Arrays.sort() en Java trie-t-elle les tableaux par comparateur personnalisé ? En Java, la méthode Arrays.sort() est une méthode très utile pour trier les tableaux. Par défaut, cette méthode trie par ordre croissant. Mais parfois, nous devons trier le tableau selon nos propres règles définies. À ce stade, vous devez utiliser un comparateur personnalisé (Comparator). Un comparateur personnalisé est une classe qui implémente l'interface Comparator.
Composants angulaires et leurs propriétés d'affichage : comprendre les valeurs par défaut non bloquantes
Mar 15, 2024 pm 04:51 PM
Le comportement d'affichage par défaut des composants du framework Angular ne concerne pas les éléments au niveau du bloc. Ce choix de conception favorise l'encapsulation des styles de composants et encourage les développeurs à définir consciemment la manière dont chaque composant est affiché. En définissant explicitement l'affichage des propriétés CSS, l'affichage des composants angulaires peut être entièrement contrôlé pour obtenir la mise en page et la réactivité souhaitées.
