English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Эта статья рассказывает о функции сортировки таблицы, реализованной с помощью Angular. Предлагается для вашего рассмотрения, подробности см. ниже:
Сначала посмотрим на效果图:
Полный код приведен ниже:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ru.oldtoolbag.com 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:"Zhao Qiang",tel:17625565618,price:7190,city:"Shanghai",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>
<div 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="Beijing">Beijing</option>
<option value="Shanghai">Shanghai</option>
<option value="Zhengzhou">Zhengzhou</option>
</select><br /><br />
<button ng-click="add()">Сохранить</button>
</form>
</div>
</body>
</html>
Для тех, кто интересуется дополнительной информацией о AngularJS, рекомендуется посетить专题 статьи на сайте: "Обзор навыков работы с指令ами AngularJS", "Введение и продвинутый урок AngularJS" и "Обзор архитектуры MVC AngularJS"
Надеюсь, что информация, изложенная в этой статье, поможет вам в разработке приложений AngularJS.
Заявление: контент этой статьи взят из Интернета, авторские права принадлежат соответствующему владельцу, контент предоставлен пользователями Интернета в качестве добровольного вклада и загружен самостоятельно, сайт не имеет права собственности, не был обработан вручную и не несет ответственности за связанные с этим юридические обязательства. Если вы обнаружите содержимое,涉嫌侵犯版权， пожалуйста, отправьте письмо по адресу: notice#oldtoolbag.com (при отправке письма замените # на @) для подачи жалобы и предоставления соответствующих доказательств. При подтверждении факта нарушения авторских прав сайт незамедлительно удаляет涉嫌侵权的内容.