اسمحوا لي أولاً تقديم المفاهيم الأساسية لـ Angular.js و Bootstrap.
AngularJS هو إطار JavaScript. يمكن إضافته إلى صفحات HTML عبر علامة <script>.
AngularJS يمتد HTML من خلال التوجيهات وربط البيانات إلى HTML من خلال التعبيرات.
Bootstrap ، من Twitter ، هو الإطار الأمامي الأكثر شعبية في الوقت الحاضر. يعتمد Bootstrap على HTML و CSS و JavaScript. إنها بسيطة ومرنة ، مما يجعل تطوير الويب أسرع.
لقد كنت أتعلم Angular.js مؤخرًا ومارس الكثير من العروض التجريبية أثناء عملية التعلم. هنا سأقوم بنشر النموذج + ترقيم الصفحات أولاً.
لنلقي نظرة على النتيجة النهائية:
يجب أن أقول إن نمط رمز Angular.js شائع جدًا ، وأن العشرات من خطوط التعليمات البرمجية تنفذ بوضوح ودقيق الوظائف المذكورة أعلاه.
بادئ ذي بدء ، يأتي مصدر بيانات الجدول من server.js ، انقر للتنزيل. احصل على الرقم ثم عرضه على الصفحة.
1. يتم عرض الجدول من خلال التكرار NG ، والرمز كما يلي:
<Table> <tr> <th> index </h> <th ng-repeat = "(x ، y) في العناصر [0]"> {{x}} </th> </r> <r ng-repeat = "x in heads"> <td> {{$ index + 1}} ng-bind = "x.city"> </td> <td ng-bind = "x.country"> </td> </tr> </table>فهرس $ هو المعلمة الافتراضية للتكرار. رأس العمود للجدول هو القيمة الرئيسية التي يتم حلها من خلال الصف الأول من مصدر البيانات (JSON). بالطبع ، إذا احتاج Bootstrap إلى تحديد أن فئة الجدول هي جدول الجدول.
2. ترقيم الصفحات أيضا نانوغرام تكرار. يجب أن أقول إن التكرار NG هو تعليمات شائعة.
رمز الترحيل كما يلي:
<av> <ul> <li> <a ng-click = "previous ()"> <span> الصفحة السابقة </span> </a> </li> <li ng-repeat = "page in pagelist" ng-class = "{active: isactivepage (page)}"> <a nglick = "selectpage (page)" ng-click = "next ()"> <span> الصفحة التالية </span> </a> </li> </ul> </v>هنا نستخدم تعليمات حدث NG-Click. يستخدم أيضًا أمر NG-Class
ng-class = "{Active: isactivePage (page)}"الرمز أعلاه هو النمط المحدد للترقيم.
يضيف هذا الجدول الترحيل إلى الصفحة هو ترحيل مزيف ، يأخذ بيانات من الواجهة الخلفية مرة واحدة ، ويعرض البيانات المصفاة من JSON من خلال ترحيل مختلف.
رمز محدد + تعليقات:
<! doctype html> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html ؛ ملف css-> <link rel = "stylesheet" href = "http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css"> <style> #divmain {width: 500px ؛ hargin: 0 auto-top: 100px ؛ 50px ؛}. pagination {right: 0px ؛ الموضع: المطلق ؛ الأعلى: -30px ؛} nav li {cursor: pointer ؛} </style> <div id = "divmain" ng-app = "myapp" العناصر [0] "> {{x}}} </th> </tr> <tr ng-repeat =" x in heads "> <td> {{$ index + 1}} </td> <td ng-bind =" x.name "> </td> <td ng-bind =" x.city " ng-bind = "x.country"> </td> </tr> </lood> <vic> <ul> <li> <a ng-click = "previous ()"> <span> الصفحة السابقة </span> </a> </li> <li ng-repeat = "pagelist" ng-class = "{acactive: iSactive)} > {{page}} </a> </li> <li> <a nglick = "next ()"> <span> الصفحة التالية </span> </a> src = "http://apps.bdimg.com/libs/angular.js/1.5.0-beta.0/angular.js"> </script> <script> var app = angular.module ("myapp" ، []) ؛ {$ http.get ("service.js"). ثم (الوظيفة (استجابة) {// مصدر البيانات $ scope.data = response.data.Records ؛ // إجمالي عدد الصفحات $ scope.pagesize = 5 ؛ $ scope.pages = math.ceil ($ scope.data.length. $ scope.pages> 5؟ $ scope.pages ؛ $ scope.pagelist = [] $ scope.pagesize)) ؛ // تصفية البيانات المعروضة الحالية في الجدول بالرقم الحالي للصفحات} $ scope.items = $ scope.data.slice (0 ، $ scope.pagesize) ؛ 1) ؛} // طباعة مفهرس الصفحة المحدد حاليًا $ scope.selectpage = function (page) {// لا تقل عن 1 من الحد الأقصى إذا (الصفحة <1 || page> $ scope. pages) return ؛ ؛ page) ؛} ؛ // قم بتعيين نمط الصفحة المحدد حاليًا $ scope.isactivePage = function (page) {return $ scope.selpage == page ؛ 1) ؛} ؛}) ؛}) </script> </body> </html>سيقدم المحرر لك الكثير حول مزيج من Angular.js و Bootstrap لتنفيذ رمز ترحيل الجدول ، وآمل أن يكون مفيدًا لك!