4: الفلترة مع AngularJs

السلام عليكم ورحمة الله وبركاته

نتابع ضمن هذه الحلقة التعرف على المزيد من الميزات الخاصة بAngularJsfilter_data.png

قمنا بالكثير من التعديلات على تطبيقنا خلال الخطوة السابقة – الدرس السابق – لذا سيكون درسنا الحالي مختصرا مفيدا.

سوف نضيف امكانية بحث نصي كامل full text search, وسنرى سوية كم العملية بسيطة جدا.

ضمن هذا الدرس, سيحوي التطبيق على حقل للبحث search box. وسنلاحظ بأن محتوى قائمة الهواتف سوف يتغير بحسب القيم المدخلة ضمن حقل البحث.

تذكير

لتشغيل المشروع ضمن المتصفح اتبع الخطوات التالية:

  • عن طريق سطر الأوامر cmd ننتقل إلى المجلد الذي يحوي المشروع
  • ثم نكتب التعليمة التي تقوم بتشغيل السيرفر
    npm start
  • ما ان يتم تنفيذ التعليمة حتى يعمل السيرفر على البورت 8000
    http://localhost:8000/app/
  • ويصبح بإمكاننا استعراض التطبيق عن طريق المتصفح

site

لتحميل تعديلات كود هذا الدرس من ال GIT ادخل التعليمة التالية ضمن سطر الاوامر الخاص ب git كما اشرنا في الدروس السابقة

Git checkout –f step-3

سوف ندرج ضمن هذا الدرس التعديلات المهمة فقط. بإمكانكم الاطلاع على كافة الفروقات من الرابط التالي: GitHub

المتحكم Controller

لا يوجد أي تعديلات على المتحكم

القالب Template

App/index.html

template

كما تلاحظون, فإننا اضفنا تاغ لعنصر الادخال <input> واستخدمنا وظيفة خاصة بالفلترة جاهزة ضمن angularJs تدعى filter الهدف منها معالجة وفلترة النصوص المتولدة ضمن موجه التكرار ngRepeat وفلترتها بحسب النص المدخل ضمن الحقل النصي الذي تمت اضافته.

الكود اعلاه, يمكن المستخدم من اضافة اي ميزة من ميزات الهواتف ضمن الحقل النصي, وفلترة قائمة الهواتف بحسبها مباشرة.

يوضح لنا الكود السابق مايلي:

  • ربط المعطيات data-binding : ويعتبر اهم ميزة من ميزات angular. عندما يتم تحميل الصفحة, يربط angular اسم الحقل النصي بمتحول variable يحمل نفس الاسم ضمن نموذج المعطيات data model ويحافظ عليهما متزامنان معنا.

ضمن الكود الحالي سنلاحظ بأن المعطيات التي يتم ادخالها ضمن الحقل النصي الخاص بالبحث – والمسمى query – سيتم الفلترة بحسبها مباشرة ضمن النصوص المتولدة نتيجة موجه التكرار ng-repeater في القائمة

اي ان الحقل النصي اصبح بمثابة فلتر للقائمة, وهذا ما يقوم به الكود التالي

Phone in phones | filter:query

اي تغيرات على نموذج  المعطيات data model سوف تتسبب بتغيرات محتويات ودخل موجه التكرار, الذي بدوره سوف يعكس وبفعالية هذه التغيرات على ال DOM ليعكس بذلك حالة نموذج المعطيات.

root scop

استخدام الفلتر filter: تستخدم وظيفة الفلتر filter القيمة الموجودة ضمن الحقل الذي يحمل الاسم query لإنشاء مصفوفة جديدة تحوي فقط القيم التي تطابق تلك القيمة – قيمة البحث.

يقوم الموجه ngRepeat بشكل اوتوماتيكي بتحديث صفحة العرض كاستجابة لتغير عدد اجهزة الهاتف التي يتم اعادتها من قبل الفلترfilter.

تجارب

استعراض قيمة البحث الحالية359796918

بإمكاننا استعراض قيمة البحث الحالية المخزنة ضمن النموذج query model عبر اضافة الكود التالي ضمن صفحة Index.html

{{query}}

ونلاحظ كيف ستتغير القيمة الموجودة ضمنه مباشرة فور الكتابة ضمن الحقل المخصص للبحث.

exp 1

استعراض قيمة البحث ضمن عنوان صفحة هتمل HTML 

سنرى سوية الآن كيف بإمكاننا عرض قيمة الحقل المربوط مع نموذج المعطيات ‘query’ ضمن عنوان صفحة هتمل HTML.

سنضيف الكود التالي ضمن تاغ العنوان في صفحة هتمل HTML

<title> Google phone gallery : {{query}} </title>

ثم نقوم باعادة تحميل الصفحة ضمن المتصفح, ونكتب ضمن حقل البحث, ولكن!! نلاحظ عدم تحديث عنوان الصفحة بحسب الكتابة. السبب في ذلك لان ‘query’ model يقع خارج النطاقscope , لأن ng-controller=’PhoneListCtr”  – والتي تحدد نطاق angularjs – تقع ضمن تاغ body وبالتالي لا تشمل ما غير ذلك.

<body ng-controller=PHoneListCtr”>

إذا اردتم ان يتم ربط نموذج الخاص بالمتحول query مع تاغ العنوان <title>, عندها يتوجب تحريك مكان الموجه ngController من موضعه الحالي إلى تاغ <html> ليشمل بذلك كل عناصر الصفحة.

<html ng-app=”phonecatApp” ng-controller=”PhoneListCtrl”>

تأكدوا من اجازة الموجه ng-cntroller من ضمن تاغ <body> بعد نقله إلى موضعه الجديد.

الآن اعيدوا تحميل الصفحة, ولاحظوا تغير عنوان الصفحة كلما تغيرت محتويات حقل البحث المسمى query.

ستلاحظون عند بداية تحميل الصفحة, بأنه ولأجزاء من الثانية يتم اظهار النص {{query}} للمستخدم. لنتجنب هذه المشكلة يوجد هنالك حل أفضل, ويمكن عبر استخدام موجه ngBind أو ngBindTemplate, وهما غير مرئيان للمستخدم عند تحميل الصفحة.

<title ng-bind-template=”Google Phone Gallery: {{query}}” > Google Phone Gallery</title>

 

الآن كل شيء على ما يرام.

سنتوقف في هذا الدرس فقط عند هذه الميزة الرائعة وسهلة الاستخدام ضمن angularJs

وإلى لقاء قريب ضمن الدرس القادم لنتابع ضمنه الحديث عن مزايا angular عبر متابعة الخطوات المتبقة ضمن تطبيقنا الحالي

وإلى ذلك الحين استودعكم الله والسلام عليكم ورحمة الله وبركاته

المصدر

https://docs.angularjs.org/tutorial

الترجمة المصطلح
الموجه Directive
تعبير Expression
الربط Binding
سياق Context
نطاق Scope
موديول – وهو ما يشبه الحزمة Module

 

Advertisements

,

  1. أضف تعليق

اترك رد

Please log in using one of these methods to post your comment:

WordPress.com Logo

أنت تعلق بإستخدام حساب WordPress.com. تسجيل خروج   / تغيير )

صورة تويتر

أنت تعلق بإستخدام حساب Twitter. تسجيل خروج   / تغيير )

Facebook photo

أنت تعلق بإستخدام حساب Facebook. تسجيل خروج   / تغيير )

Google+ photo

أنت تعلق بإستخدام حساب Google+. تسجيل خروج   / تغيير )

Connecting to %s

%d مدونون معجبون بهذه: