في هذه الخطوة ، ستتعلم كيفية إنشاء مرشح العرض الخاص بك.
يرجى إعادة تعيين دليل العمل:
git checkout -f الخطوة 9
انتقل الآن إلى صفحة تفاصيل الهاتف المحمول. في الخطوة السابقة ، تعرض صفحة تفاصيل الهاتف "True" أو "False" للإشارة إلى ما إذا كان الهاتف لديه ميزة محددة. الآن نستخدم مرشحًا مخصصًا لرسم هذه السلاسل النصية: √ "صحيح" ؛ و × كما "خطأ". دعونا نرى كيف يبدو رمز المرشح.
يتم سرد الاختلافات الأكثر أهمية بين الخطوة 8 والخطوة 9 أدناه. يمكنك رؤية الفرق الكامل في Github.
مرشحات مخصصة
لإنشاء مرشح جديد ، قم أولاً بإنشاء وحدة مرشحات phonecatfilters وتسجيل المرشح المخصص مع هذه الوحدة.
APP/JS/Filters.JS
Angular.Module ('phonecatfilters' ، []). filter ('checkmark' ، function () {return function (input) {return input؟ '/u2713': '/u2718 ؛} ؛}) ؛مرشحنا يدعى CheckMark. إما مدخلاتها صحيحة أو خاطئة ، ونحن نعيد حرفين Unicode ( /u2713 و /u2718) التي تمثل صوابًا أو خطأ.
الآن بعد أن أصبح مرشحنا جاهزًا ، نحتاج إلى تسجيل وحدة Phonecatfilters الخاصة بنا كاعتماد على الوحدة الرئيسية الخاصة بنا.
APP/JS/APP/JS
... Angular.Module ('phonecat' ، ['phonecatfilters']) ...نموذج
نظرًا لأن رمز القالب الخاص بنا مكتوب في ملف App/JS/Filter.js ، نحتاج إلى تقديم هذا الملف في قالب التخطيط.
app/index.html
... <script src = "js/controllers.js"> </script> <script src = "js/filters.js"> </script> ...
بناء الجملة لاستخدام المرشحات في قوالب AngularJS هو:
{{التعبير | مرشح}}
نطبق المرشح على قالب تفاصيل الهاتف:
التطبيق/الجزئي/detail.html
... <dl> <dt> Infrared </dt> <dd> {{phone.connectivity.infrared | checkmark}} </dd> <dt> GPS </dt> <dd> {{phone.connectivity.gps | checkmark}} </dd> </dl> ...امتحان
يجب اختبار المرشحات ، مثل المكونات الأخرى ، ، ويسهل إكمال هذه الاختبارات.
اختبار/وحدة/مرشحات spec.js
وصف ('filter' ، function () {isheach (الوحدة النمطية ('phonecatfilters'))) ؛ وصف ('checkmark' ، function () {it ('يجب تحويل القيم المنطقية إلى علامة checkode أو cross' ، الحقن (الدالة (checkmarkfilter) {توقع (checkmarkfilter (true)). توقع (FALSE). }) ؛لاحظ أنه قبل إجراء أي اختبارات مرشح ، تحتاج إلى تكوين حاقن الاختبار الخاص بنا لوحدة المرشحات phonecatfilters.
تنفيذ ./scripts/test/sh لتشغيل الاختبار ، ويجب أن ترى الإخراج التالي:
Chrome: Runner Reset ...... إجمالي 4 اختبارات (تم تمريره: 4 ؛ فشل: 0 ؛ الأخطاء: 0) (3.00 مللي ثانية) Chrome 19.0.1084.36 Mac OS: Run 4 Tests (تم تمريره: 4 ؛ فشل: 0 ؛ أخطاء 0) (3.00 مللي ثانية)
الآن دعنا نمارس AngularJS مرشح مدمج وأضف الارتباطات التالية إلى index.html:
يمكننا أيضًا استخدام مربع إدخال لإنشاء نموذج ودمجه مع الربط المصفى. أضف الكود التالي إلى index.html:
<input ng-model = "userInput"> أعلى: {{userInput | أقصى}}
لخص
الآن بعد أن عرفت كيفية كتابة واختبار مكون إضافي مخصص ، في الخطوة 10 ، سوف نتعلم كيفية متابعة صفحة تفاصيل هاتفنا المحمول باستخدام AngularJS.
ما سبق هو تجميع المعلومات على مرشح AngularJS. سنستمر في إضافة المعلومات ذات الصلة في المستقبل. شكرا لك على دعمك لهذا الموقع!