English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Este exemplo mostra como a Angular realiza a ordenação de tabelas. Partilho com vocês para referência, conforme detalhado a seguir:
Vamos olhar primeiro para o efeito gráfico:
O código completo está a seguir:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">-8" /><br
<title>pt.oldtoolbag.com Angular ordenação de tabelas</title>
<style>
table{
border: 1px sólido;
text-alinhamento: centro;
width: 40%;
height: 400px;
}
tr,td{
border: 1px sólido;
}
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("O nome de usuário não pode estar vazio");
$("#s").css("borda-cor","vermelho");
}else if(susername==undefined || susername==""){
alert("O nome do produto não pode estar vazio");
$("#y").css("borda-cor","vermelho");
}else if(stel==undefined || stel==""){
alert("O número de telefone não pode estar vazio");
$("#t").css("borda-cor","vermelho");
}else if(sprice==undefined || sprice==""){
alert("O preço não pode estar vazio");
$("#p").css("borda-cor","vermelho");
}else if(scity==undefined || scity==""){
alert("A cidade deve ser selecionada");
}
else{
$scope.shop.push({nome:sname,usuario:susername,telefone:stel,preco:sprice,cidade:scity})
$scope.toto=false;
}
}
})
</script>
</cabecalho>
<body ng-app="MyApp" ng-controlador="demoC">
>-clicar="toto=true" estilo="fundo-cor: amarelo-esverdeado;">Novo pedido</button>salvar<
>-clicar="del()" estilo="fundo-cor: amarelo-esverdeado;">Exclusão em massa</button>salvar<
<input type="text" placeholder="Pesquisa por nome do produto" ng-model="selname"> /><br
<input type="text" placeholder="Pesquisa por número de telefone" ng-model="seltel">/><br
select ng-model="selstate">
<option value="">Pesquisa por estado</<option value="Zhengzhou">Zhengzhou<
<option value="已发货">已发货</<option value="Zhengzhou">Zhengzhou<
<option value="未发货">未发货</<option value="Zhengzhou">Zhengzhou<
</select>
<table cellpadding="0px" cellspacing="0px">
<tr style="background-cor: cinza;">
<td><input type="checkbox" ng-model="ckall" ng-click="ckAll()"></td>
<td>id<button ng-click="px='id';flag=!flag" style="background-cor: amarelo claro;">Classificação</button></td>
<td>nome do produto</td>
<td>nome de usuário</td>
<td>número de telefone</td>
<td>preço<button ng-click="px='price';flag=!flag" style="background-cor: amarelo claro;">Classificação</button></td>
<td>cidade</td>
<td>tempo de pedido<button ng-click="px='time';flag=!flag" style="background-cor: amarelo claro;">Classificação</button></td>
<td>estado</td>
</tr>
<tr ng-repeat="s in shop | filter:{nome:selnome} | filter:{tel:seltel} | filter:{estado:selestado} | 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=='enviado'" style="cor: amarelo claro;">{{s.state}}</span>
<span ng-show="s.state=='não enviado'" style="cor: amarelo;"><a href="#" rel="externo não seguir" ng-click="s.state='enviado'">{{s.state}}</a></span></td>
</tr>
</table>
<div style="margem-top: 50px; margem-left: 10esquerda:
0px;">-<form ng
show="toto"> / nome do produto: <input type="text"-ng /select><br /><br
model="sname" id="s"><br-nome de usuário: <input type="text" ng/select><br /select><br /><br
model="susername"id="y"-número de telefone: <input type="text" ng/select><br /select><br /><br
model="stel" id="t"-preço: <input type="text" ng/select><br /select><br /><br
model="sprice" id="p"-cidade: <select ng
model="scity">--<option value="">--</<option value="Zhengzhou">Zhengzhou<
escolha a cidade/<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>salvar<
</form>
</div>
</body>
</html>
Leitores interessados em mais conteúdo sobre AngularJS podem consultar a seção especial deste site: 'Resumo de Técnicas de Manipulação de Directivas AngularJS', 'Tutorial de Entrada e Avançamento AngularJS' e 'Resumo da Arquitetura MVC AngularJS'.
Espero que o conteúdo deste artigo ajude a todos na programação AngularJS.
Declaração: O conteúdo deste artigo é extraído da internet, pertence ao autor original, é contribuído e carregado voluntariamente pelos usuários da internet, este site não possui direitos de propriedade, não foi editado manualmente e não assume responsabilidade por eventuais responsabilidades legais. Se você encontrar conteúdo suspeito de violação de direitos autorais, por favor, envie um e-mail para: notice#oldtoolbag.com (ao enviar e-mail, substitua # por @ para denunciar e forneça provas relevantes. Caso seja confirmado, o site deletará imediatamente o conteúdo suspeito de violação de direitos autorais.)