يتم استخدام المرشحات لتغيير البيانات المعدلة ويمكن تصنيفها في التعبيرات أو استخدام توجيهات أحرف الأنابيب. فيما يلي قائمة بالمرشحات شائعة الاستخدام.
| س. | اسم | يصف |
|---|---|---|
| 1 | عاصمة | تحويل النص إلى نص كبير. |
| 2 | القضية السفلية | تحويل النص إلى نص صغير. |
| 3 | عملة | نص تنسيق العملة. |
| 4 | فلتر | تصفية مجموعة من المجموعات الفرعية التي تستند إلى المعايير المقدمة. |
| 5 | نوع | يوفر الفرز المصفوفات الأساسية القياسية. |
مرشح قبعات
أضف المرشحات الكبيرة لاستخدام تعبيرات أحرف الأنابيب. هنا ، تتم إضافة مرشحات رأس المال ، وتتم طباعة أسماء الطلاب بأحرف رأس المال.
أدخل الاسم الأول: <input type = "text" ng-model = "student.firstName"> أدخل الاسم الأخير: <input type = "text" ng-model = "student.lastname"> name في الحالة العليا: {{student.fullname () | أقصى}}مرشح صغير
أضف مرشحات صغيرة ، باستخدام تعبيرات أحرف الأنابيب. أضف مرشحًا صغيرًا هنا لطباعة أسماء الطلاب بأحرف صغيرة.
أدخل الاسم الأول: <input type = "text" ng-model = "student.firstName"> أدخل الاسم الأخير: <input type = "text" ng-model = "student.lastname"> name في الحالة العليا: {{student.fullname () | صغير}}مرشح العملة
يستخدم مرشح الدولار الكندي حرف الأنابيب لإرجاع التعبير عن الرقم. لقد أضفنا هنا مرشحات إلى رسوم طباعة العملة باستخدام تنسيق العملة.
أدخل الرسوم: <إدخال type = "text" ng-model = "student.fees"> الرسوم: {{student.fees | عملة}}المرشحات للمرشحات
لعرض الموضوعات المطلوبة فقط ، نستخدم اسم الموضوع كمرشح.
أدخل الموضوع: <type type = "text" ng-model = "thisionName"> الموضوع: <ul> <li ng-repeat = "tourge in student.subjects | filter: thinkName"> {{name + '، marks:' + thision.marks}}} </li> </ul>فرز المرشح
لفرز الموضوعات بالعلامات ، نستخدم علامات Orderby.
الموضوع: <ul> <li ng-repeat = "موضوع في student.subjects | orderby: 'marks'"> {{thision.name + '، marks:' + thision.marks}} </li> </ul>مثال
ستظهر الأمثلة التالية جميع المرشحات المذكورة أعلاه.
testangularjs.html
<html> <Head> <title> مرشحات JS الزاوية </title> </head> <body> <h2> تطبيق عينة AngularJS </h2> <div ng-app = "" ng-controller = "sextive" ng-model = "student.firstName"> </td> </tr> <tr> <td> أدخل الاسم الأخير: </td> <td> <type type = "text" ng-model = "student.lastname"> </td> </td> <td> إدخال الرسوم: </td> <td> <rate = " ng-model = "student.fees"> </td> </tr> <tr> <td> أدخل الموضوع: </td> <td> <twy type = "text" ng-model = "thinkname"> </td> </td> </tr> </tr> <tr> <td> الاسم في العلوية: </td> <td> Extrace}} </td> </tr> <tr> <td> الاسم في الحالة السفلية: </td> <td> {{student.fullname () | SHOLLASE}} </td> </tr> <tr> <td> الرسوم: </td> <td> {{student.fees | العملة}} </td> </tr> <tr> <td> الموضوع: </td> <td> <ul> <li ng-repeat = "الموضوع في الطالب. </li></ul> </td> </tr> </table> </viv> <script> وظيفة StudentController ($ scope) {$ scope.student = {firstName: "mahesh" ، lastName: "parashar" ، الرسوم: 500 ، الموضوعات: {name: 'Math' ، Marks: 65}] ، fullname: function () {var studentObject ؛ studentObject = $ scope.student ؛ إرجاع studentObject.firstName + "" + studentObject.lastname ؛ }} ؛} </script> <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"> </script> </body> </html>الإخراج
افتح textangularjs.html في متصفح الويب وشاهد النتائج التالية:
ما سبق هو المعلومات التي تقوم بفرز مرشح AngularJS. سنستمر في إضافة المعلومات ذات الصلة في المستقبل. شكرا لك على دعمك لهذا الموقع!