English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
هذا المقال يشرح كيفية تحقيق تصنيف جدول باستخدام Angular. يشارك معكم للاستفادة، وهو كالتالي:
دعونا نبدأ بمعاينة الصورة النهائية:
كود الكامل كما يلي:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ar.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=[{ الحالة1: غير صحيحة،المعرف:9001،الاسم:"iphoneX"،اسم المستخدم:"زنغ سان"،رقم الهاتف:13525565588،السعر:8699،المدينة:"بكين"،الوقت:new Date('11-23 10:00:00')،الحالة:"تم الشحن"},
{الحالة1: غير صحيحة،المعرف:3007،الاسم:"iphone6"،اسم المستخدم:"وانغ هونغ"،رقم الهاتف:18524565588،السعر:5635،المدينة:"Zhengzhou"،الوقت:new Date('11-23 11:38:20')،الحالة:"تم الشحن"},
{الحالة1: غير صحيحة،المعرف:5312،الاسم:"iphone7"،اسم المستخدم:"زاو شاولونغ"،رقم الهاتف:17545585598،السعر:6180،المدينة:"بكين"،الوقت:new Date('11-23 9:17:00')،الحالة:"لم يتم شحنه"},
\{\state1:\false,\id:\2132,\name:\"iphone8\",\username:\"\u8d75\u5f3a\",\tel:\17625565618,\price:\7190,\city:\"\u6d77\u4e1c\",\time:\new\Date(\'11-23\ 10:40:00\'),\state:\"\u672a\u53d1\u8fde\"\}
];
\$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\==\"\u5df2\u53d1\u8fde\"\&&\$scope.shop[i].state\){
\$scope.shop.splice(i,1);
i--;
}
}
}
\$scope.add\=function\(){
var \u7a7a\u5c40\u5546\u54c1\u540d\u4e3a\$scope.sname;
var \u7a7a\u5c40\u7528\u6237\u540d\u4e3a\$scope.susername;
var \u7a7a\u5c40\u624b\u673a\u53f7\u4e3a\$scope.stel;
var \u7a7a\u5c40\u4e1a\u4ef7\u683c\u4e3a\$scope.sprice;
var \u7a7a\u5c40\u4e1a\u57ce\u5e02\u4e3a\$scope.scity;
if(sname\==\undefined\ || \sname\==\"\"\){
alert(\"\u7528\u6237\u540d\u4e0d\u80fd\u4e3a\u7a7a\");
$("#s").css("border-color","red");
\}else\ if(susername\==\undefined\ || \susername\==\"\"\){
alert(\"\u5546\u54c1\u540d\u4e0d\u80fd\u4e3a\u7a7a\");
$("#y").css("border-color","red");
\}else\ if(stel\==\undefined\ || \stel\==\"\"\){
alert(\"\u624b\u673a\u53f7\u4e0d\u80fd\u4e3a\u7a7a\");
$("#t").css("border-color","red");
\}else\ if(sprice\==\undefined\ || \sprice\==\"\"\){
alert(\"\u4ef7\u683c\u4e0d\u80fd\u4e3a\u7a7a\");
$("#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" / نموذج-نموذج="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 من البداية إلى المتقدم' و 'تحليل معمارية AngularJS MVC'.
آمل أن تكون هذه المقالة قد ساعدت الجميع في تصميم برامج AngularJS.
بيان: محتويات هذا المقال تم جمعها من الإنترنت، ملكية المحتويات للمالك الأصلي، تم جمع المحتويات من قبل المستخدمين عبر الإنترنت بطرقهم الخاصة، هذا الموقع لا يمتلك حقوق الملكية، لم يتم تعديل المحتويات بشكل يدوي، ولا يتحمل أي مسؤولية قانونية متعلقة بذلك. إذا وجدت محتوى يشتبه في حقوق النسخ، فمرحبًا بك في إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (عند إرسال البريد الإلكتروني، يرجى استبدال # ب @) لتقديم الشكوى، وتقديم الدليل ذات الصلة، وإذا تم التحقق من ذلك، سيتم حذف المحتوى المزعوم فورًا.