English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Este artículo proporciona un ejemplo de cómo se puede implementar la función de ordenamiento de tablas en Angular. Lo comparto con ustedes para que lo consideren, y aquí está la información específica：
Veamos primero el efecto gráfico：
El código completo se muestra a continuación：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">-8" /><br
<title>es.oldtoolbag.com Angular sorting de tablas</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("El nombre de usuario no puede estar vacío");
$("#s").css("borde-color","rojo");
}else if(susuario==undefined || susuario==""){
alert("El nombre del producto no puede estar vacío");
$("#y").css("borde-color","rojo");
}else if(stel==undefined || stel==""){
alert("El número de teléfono no puede estar vacío");
$("#t").css("borde-color","rojo");
}else if(sprecio==undefined || sprecio==""){
alert("El precio no puede estar vacío");
$("#p").css("borde-color","rojo");
}else if(sciudad==undefined || sciudad==""){
alert("La ciudad debe ser seleccionada");
}
else{
$scope.shop.push({nombre:sname,usuario:susername,telefono:stel,precio:sprice,ciudad:scity})
$scope.toto=false;
}
}
})
</script>
</cabecera>
<body ng-app="MyApp" ng-controlador="demoC">
>-click="toto=true" estilo="fondo-color: amarilloverde;">Agregar orden</button>guardar<
>-click="del()" estilo="fondo-color: amarilloverde;">Eliminar en lote</button>guardar<
<input type="text" placeholder="Buscar por nombre del producto" ng-modelo="selname" /><br
<input type="text" placeholder="Buscar por número de teléfono" ng-modelo="seltel"/><br
select ng-modelo="selstate">
<option value="">Buscar por estado</<option value="Zhengzhou">Zhengzhou<
<option value="enviado">enviado</<option value="Zhengzhou">Zhengzhou<
<option value="no_enviado">no_enviado</<option value="Zhengzhou">Zhengzhou<
</select>
<table alineacion="0px" separacion="0px">
<tr style="background-color: gris;">
<td><input type="checkbox" ng-model="seleccionarTodo" ng-click="seleccionarTodo()"></td>
<td>id<button ng-click="px='id';flag=!flag" style="background-color: amarillo claro;">Ordenar</button></td>
<td>Nombre del producto</td>
<td>Nombre de usuario</td>
<td>Número de teléfono</td>
<td>Precio<button ng-click="px='precio';flag=!flag" style="background-color: amarillo claro;">Ordenar</button></td>
<td>Ciudad</td>
<td>Fecha de pedido<button ng-click="px='fecha';flag=!flag" style="background-color: amarillo claro;">Ordenar</button></td>
<td>Estado</td>
</tr>
<tr ng-repeat="s en tienda | filtro:{nombre:selnombre} | filtro:{tel:seltel} | filtro:{estado:selestado} | ordenar:px:flag ">
<td><input type="checkbox" ng-model="s.estado1></td>
<td>{{s.id}}</td>
<td>{{s.nombre}}</td>
<td>{{s.usuario}}</td>
<td>{{s.tel}}</td>
<td>{{s.precio | moneda:"￥"}}</td>
<td>{{s.ciudad}}</td>
<td>{{s.fecha | fecha : 'MM-HH hh:dd:ss'}}</td>
<td><span ng-show="s.estado=='enviado'" style="color: amarillo claro;">{{s.estado}}</span>
<span ng-show="s.estado=='pendiente'" style="color: amarillo;"><a href="#" rel="externo nofollow" ng-click="s.estado='enviado'">{{s.estado}}</a></span></td>
</tr>
</table>
<div style="margen-top: 50px; margen-izquierda: 10left:
0px;">-<form ng
show="toto"> / Nombre del producto: <input type="text"-ng /select><br /><br
model="sname" id="s"><br-Nombre de usuario: <input type="text" ng/select><br /select><br /><br
model="susername"id="y"-Número de teléfono: <input type="text" ng/select><br /select><br /><br
model="stel" id="t"-Precio: <input type="text" ng/select><br /select><br /><br
model="sprice" id="p"-Ciudad: <select ng
model="scity">--<option value="">--</<option value="Zhengzhou">Zhengzhou<
Elegir ciudad/<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>guardar<
</form>
</div>
</body>
</html>
Los lectores interesados en más contenido relacionado con AngularJS pueden ver la sección especial de este sitio: 'Resumen de técnicas de manipulación de directivas AngularJS', 'Tutorial de inicio y avanzado de AngularJS' y 'Resumen de arquitectura MVC de AngularJS'.
Espero que lo descrito en este artículo pueda ayudar a todos a diseñar programas AngularJS.
Declaración: El contenido de este artículo se obtiene de la red, es propiedad del autor original, el contenido se contribuye y carga de manera autónoma por los usuarios de Internet, este sitio no posee los derechos de propiedad, no se ha procesado editorialmente y no asume la responsabilidad de las responsabilidades legales relacionadas. Si encuentra contenido sospechoso de infracción de derechos de autor, le invitamos a enviar un correo electrónico a: notice#oldtoolbag.com (al enviar un correo electrónico, reemplace # con @ para denunciar y proporcione evidencia. Una vez confirmado, este sitio eliminará inmediatamente el contenido sospechoso de infracción de derechos de autor.)