مرشح AngularJS
يمكن إضافة المرشحات إلى التعبيرات والتوجيهات باستخدام حرف الأنابيب (|).
مرشح AngularJS
يمكن استخدام مرشحات AngularJS لتحويل البيانات:
| فلتر | يصف |
|---|---|
| عملة | تنسيق الأرقام في تنسيق العملة. |
| فلتر | حدد مجموعة فرعية من عنصر الصفيف. |
| صغيرة | سلاسل التنسيق هي صغيرة. |
| Orderby | ترتيب المصفوفات وفقا للتعبير. |
| كبار | يتم رسملة السلسلة المنسقة. |
أضف مرشحات إلى التعبيرات
يمكن إضافة المرشحات إلى التعبيرات عبر حرف الأنابيب (|) ومرشح. .
((في المثالين التاليين ، سنستخدم وحدة تحكم الشخص المذكورة في الفصل السابق))
يقوم مرشح الأحرف الكبيرة بتنسيق السلسلة إلى الحرف الكبيرة:
مثيل AngularJS
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js ng-controller = "personctrl"> <p> الاسم {{aralsname | ExtraCcase}} </p> </viv> <script src = "personcontroller.js"> </script> </body> </html>نتائج التشغيل:
اسم DOE
يقوم مرشحات الفلتر الصغيرة بتنسيق السلسلة إلى الحرف الصغيرة:
مثيل AngularJS
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js ng-controller = "personctrl"> <p> الاسم {{aralsname | SHOLLASE}} </p> </viv> <script src = "personController.js"> </script> </body> </html>نتائج التشغيل:
اسمه دو
مرشح العملة
يقوم مرشح العملة بتنسيق الأرقام في تنسيق العملة:
مثيل AngularJS
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js ng-controller = "costctrl"> الكمية: <type type = "number" ng-model = "Quantity"> السعر: <input type = "number" ng-model = "price"> <p> price = {{Quantity * price) | العملة}} </p> </viv> <script> var app = Angular.module ('myapp' ، []) ؛ app.controller ('costctrl' ، function ($ scope) {$ scope.quantity = 1 ؛ $ scope.price = 9.99 ؛نتائج التشغيل:
كمية: سعر:
إجمالي السعر = 9.99 دولار
أضف مرشحات إلى التوجيهات
يمكن إضافة المرشحات إلى التوجيهات عبر حرف الأنابيب (|) ومرشح.
يرتب مرشح Orderby المصفوفات وفقًا للتعبيرات:
مثيل AngularJS
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js ng-controller = "namesctrl"> <p> كائن الحلقة: </p> <ul> <li ng-repeat = "x in names | orderby: 'country'> {{x.name + '،' + x.country}} </li>نتائج التشغيل:
كائن الحلقة:
مرشح إدخال
يمكن إضافة مرشح الإدخال إلى التوجيه بواسطة حرف الأنابيب (|) ومرشح يتبعه القولون واسم طراز.
يختار مرشح المرشح مجموعة فرعية من المصفوفة:
مثيل AngularJS
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js ng-controller = "namesctrl"> <p> تصفية الإدخال: </p> <p> <ppinty type = "text" ng-model = "test"> </p> <ul> <li ng-repeat = "x in names | filter: test | orderby: 'country'" </li></ul> </viv> <script src = "namescontroller.js"> </script> </body> </html>
تأثير الجري:
تصفية الإدخال:
ما سبق هو ملخص للمعرفة حول مرشحات AngularJS. سوف نستمر في إضافتها لاحقًا. يمكن للأصدقاء الذين يحتاجون إليها الرجوع إليها.