لقد تعلمت عن استخدام AngularJS من قبل ، لذلك سأكتب ببساطة برنامجًا صغيرًا لتنفيذ وظائف تصفية الاستعلام والفرز.
يمكنك التعلم من هذا البرنامج:
1 angularjs مرشح
2 كيفية استخدام التكرار NG
3. استخدام وحدات التحكم
4 ربط البيانات
تحليل البرمجة
أولاً ، إذا كنت ترغب في الاستعلام عن مرشحات أولاً ، فأنت بحاجة إلى استخدام مرشح المرشح في AngularJS.
استخدم حرف أمر خط الأنابيب | مباشرة بعد التعبير ، واتبع طريقة الكتابة التالية لتحقيق تأثير التصفية:
{{persons | مرشح: استعلام}}
باستخدام مرشح لتنفيذ التصفية ، فإن الاستعلام هو السلسلة التي تم إدخالها عند الاستعلام عن التصفية.
وبالمثل ، يمكن تحقيق وظيفة الفرز باستخدام Orderby:
{{persons | مرشح: استعلام | Orderby: Order}}
الاستعلام أعلاه والفرز ينطوي على متغيرين ، الاستعلام والنظام. هنا يمكنك استخدام NG-Model مباشرة لتنفيذ ربط البيانات:
Search: <input ng-model = "query"> sort by: <select ng-model = "order"> <option value = "name"> name </oper
AngularJS هي لغة إطار قائمة على DOM ، لذلك ليست هناك حاجة لتنفيذ أي مستمعين ومحفزات الأحداث. عندما يكون أي تغيير في مربع الإدخال حيث يوجد الاستعلام ، سيتم تشغيل مربع الإدخال والتعبير التالي لتحديث مربع الإدخال والتعبير التالي!
بالمقارنة مع بعض الأطر الأخرى ، يتم إضافته إلى DOM من خلال DOM Node InnerHTML استنادًا إلى السلاسل. تنفيذ AngularJS يسرع عرض النماذج ووجهات النظر. كما أنه يقلل من كتابة رموز مثل المستمعين والمشغلات غير الضرورية ، ويحقق حقًا تأثيرات تشبه الربيع ~
يمكن تحقيق عرض البيانات من خلال التكرار NG. عندما تنصح صفحة الويب على التكرار NG ، سيتم استنساخ علامة لكل عنصر في الصفيف للتجميع والتحليل.
<ul> <li ng-repeat = "person in persons | filter: query | orderby: order"> {{person.name}} {{person.age}} </li> </ul>ما تبقى من العمل هو تهيئة صفيف بيرونات في البرنامج النصي:
<div ng-controller = "ctl"> ... </div> <script type = "text/javaScript"> function ctl ($ scope) {$ scope.persons = [{"name": {"name": "Wangwu" ، "Age": 30}] ؛ $ scope.order = "Age" ؛ } </script>الكود والنتائج
أخيرًا ، يتم نشر جميع الرموز:
<! doctype html> <html ng-app> <head> <meta http-equiv = "content-type" content = "text/html ؛ charset = utf-8"/> <script src = "http://apps.bdimg.com/libs/angular.js/1.2 </head> <body> <div ng-controller = "ctl"> Search: <input ng-model = "query"> sort by: <select ng-model = "order"> <torts value = "name"> name </option> <spue value = "age"> age </soph> <uler> <li ng-reepeat = "person kearn | {{person.name}} {{person.age}} </li> </ul> </viv> <script type = "text/javaScript"> function ctl ($ scope) {$ scope.persons = [{"name": {"name": "Lisi" ، "Age": 20} ، {"name": "Wangwu" ، "Age": 30}] ؛ $ scope.order = "Age" ؛ } </script> </body> </html>استخدم النتائج:
بشكل افتراضي ، استخدم العمر لفرز:
عن طريق الاختيار ، يمكنك استخدام فرز الاسم
عند إدخال الأحرف ، سيتم تصفية بعض الخيارات تلقائيًا من خلال الاستعلام.
ما سبق هو فرز المعلومات لتصفية وفرز AngularJS. سنستمر في إضافة المعلومات ذات الصلة في المستقبل. شكرا لدعمكم لهذا الموقع!