في هذه الخطوة ، ستضيف ميزة تتيح للمستخدمين التحكم في الطلب الذي يتم فيه عرض قائمة الهاتف. يمكن تنفيذ الفرز الديناميكي بهذه الطريقة ، وإضافة خاصية نموذجية جديدة ، ودمجها مع التكرار ، ثم السماح لربط البيانات للقيام بالباقي.
يرجى إعادة تعيين دليل العمل:
git checkout -f step -4
يجب أن تجد أنه بالإضافة إلى مربع البحث ، يحتوي تطبيقك على قائمة إضافية تسمح بالتحكم في ترتيب ترتيب الهاتف.
يتم سرد الاختلافات الأكثر أهمية بين الخطوة 3 والخطوة 4 أدناه. يمكنك رؤية الفرق الكامل في Github.
نموذج
app/index.html
Search: <input ng-model = "query"> sort by: <select ng-model = "orderprop"> <option value = "name"> alphabetical </portive> <option value = "age"> <p> {{phone.snippet}} </p> </li> </ul>لقد أجرينا التغييرات التالية في index.html:
أولاً ، أضفنا علامة <select> تسمى OrderProp بحيث يمكن لمستخدمينا اختيار طريقتي الفرز التي نقدمها.
بعد ذلك ، أضف مرشح Orderby بعد مرشح التصفية لمعالجة البيانات التي تدخل المكرر. يأخذ مرشح Orderby صفيفًا كمدخلات ، ونسخ نسخة ، ويعيد تسهيل النسخ وإخراجها إلى المؤلف.
ينشئ AngularJS ربطًا ثنائي الاتجاه بين عنصر SELECT ونموذج OrderProp. بعد ذلك ، سيتم استخدام OrderProp كمدخلات في مرشح Orderby.
كما قلنا عندما ناقشنا ربط البيانات والتكرار في الخطوة 3 ، بغض النظر عن وقت يتغير نموذج البيانات (مثل المستخدم يحدد ترتيبًا مختلفًا في القائمة المنسدلة) ، سيقوم ربط بيانات AngularJS تلقائيًا بتحديث العرض. لا عملية أخرق دوم!
وحدة تحكم
APP/JS/Controllers.js:
وظيفة phonelistctrl ($ scope) {$ scope.pons = [{"name": "Nexus s" ، "Snippet": "Fast JUT MOT WAST WITH NEXUS S." ، "Age": 0} ، {"name": "Motorola Xoom ™ with Wi-Fi" ، "Snippet": "The Next Generation". "Motorola Xoom ™" ، "Snippet": "The Next ، Generation Generation Tablet." ، "Age": 2}] ؛ $ scope.orderprop = 'age' ؛}قمنا بتعديل نموذج الهواتف - صفيف الهاتف المحمول - إضافة سمة عمرية إلى كل سجل هاتف محمول. سنقوم بفرز الهواتف وفقًا لسمة العمر.
أضفنا سطرًا إلى رمز وحدة التحكم لجعل القيمة الافتراضية لـ OrderProp العمر. إذا لم نقم بتعيين القيمة الافتراضية ، فسيبقى هذا النموذج غير معمل حتى يحدد مستخدمونا طلبًا في القائمة المنسدلة.
الآن يجب أن نتحدث عن ربط البيانات ثنائية الاتجاه. لاحظ أنه عندما يتم تحميل التطبيق في المتصفح ، يتم تحديد "الأحدث" في القائمة المنسدلة. هذا لأننا قمنا بتعيين OrderProp على "العمر" في وحدة التحكم. لذلك يعمل الربط في الاتجاه من نموذجنا إلى واجهة المستخدم - أي ربط البيانات من النموذج إلى العرض. الآن عند تحديد "أبجديًا" في القائمة المنسدلة ، سيتم تحديث نموذج البيانات في نفس الوقت وسيتم إعادة ترتيب صفيف قائمة الهاتف. في هذا الوقت ، يصبح ربط البيانات مفعولًا من اتجاه آخر - أي ربط البيانات من العرض إلى النموذج.
امتحان
يمكن التحقق من التغييرات التي نجريها عن طريق اختبار الوحدة أو اختبار من طرف إلى طرف. دعونا نلقي نظرة أولاً على اختبارات الوحدة:
اختبار/وحدة/وحدات التحكم spec.js:
وصف ('controllers' phonecat '، function () {وصف (' phonelistctrl '، function () {var scope ، ctrl ؛ isheach (function () {scope = {} ، ctrl = new phonelistctrl (scope) ؛}) ؛ }) ؛تحقق اختبارات الوحدة الآن من ضبط القيمة الافتراضية بشكل صحيح.
نحن نستخدم واجهة Jasmine لاستخراج وحدة التحكم PhonelistCtrl في كتلة قبل ، والتي ستشاركها جميع الاختبارات في جميع بلوك الأصل.
قم بتشغيل اختبارات الوحدة هذه ، تمامًا كما كان من قبل ، قم بتنفيذ البرنامج النصي.
Chrome: Runner Reset ... Total 2 اختبارات (تم تمريرها: 2 ؛ فشل: 0 ؛ الأخطاء: 0) (3.00 مللي ثانية) Chrome 19.0.1084.36 Mac OS: Run 2 اختبارات (تم تمريرها: 2 ؛ فشل: 0 ؛ أخطاء 0) (3.00 مللي ثانية)
الآن نحول انتباهنا إلى الاختبار الشامل.
اختبار/e2e/السيناريوهات:
... إنه (يجب أن يكون من الممكن التحكم في ترتيب الهاتف عبر مربع SELECT SELECT "، Function () {// دعنا نضيق مجموعة البيانات لجعل التأكيدات الاختبار أقصر إدخالًا ('Query'). أدخل ('tablet') Xoom/u2122 "]) ؛ SELECT ('OrderProp'). الخيار ('Alphabetical') ؛ توقع (مكرر ('. هواتف li' ، 'قائمة الهاتف'). العمود ('phone.name')).يتحقق الاختبار الشامل إلى أن آلية الفرز لمربع الخيار صحيحة.
يمكنك الآن تحديث متصفحك وتشغيل الاختبار الشامل مرة أخرى ، أو يمكنك تشغيله على خادم AngularJS.
يمارس
في وحدة تحكم PhonelistCtrl ، قم بحذف OrderProp لإنشاء البيان ، وسترى أن AngularJs ستضيف مؤقتًا خيارًا فارغًا في القائمة المنسدلة ، وترتيب الفرز هو النوع الافتراضي (أي غير مصنف).
أضف `{{orderprop}} ملزمة لقالب index.html لعرض قيمته في الوقت الحقيقي.
لخص
لقد قدمت الآن وظائف البحث لتطبيقك واختبرته بالكامل. الخطوة 5 سوف نتعرف على خدمات AngularJS وكيف يستخدم AngularJS حقن التبعية.
ما سبق هو تجميع للمعلومات لربط AngularJS ثنائي الاتجاه. سنستمر في إضافة المعلومات ذات الصلة في المستقبل. شكرا لدعمكم لهذا الموقع!