التحليل الكامل لاستخدام المرشح في AngularJS

في عالم AngularJS ، يوفر Filter طريقة لتنسيق البيانات. يوفر لنا Angular أيضًا العديد من المرشحات المدمجة ، كما أنه من السهل جدًا إنشاء مرشحات مخصصة.

في قالب HTML ربط {{}} ، نستخدم | للاتصال المرشحات. على سبيل المثال ، نريد أن تعرض السلسلة جميع أحرف رأس المال:

 {{name | أقصى}}

بالطبع ، يمكننا أيضًا استخدام خدمة Filter $ في JavaScript للاتصال ، واستخدام شركة String Classion كمثال:

 App.Controller ('democontroller' ، ['$ scope' ، '$ filter' ، function ($ scope ، $ filter) {$ scope.name = $ filter ('loporcase') ('ari') ؛}]) ؛

كيفية تمرير المعلمات لتصفية؟ ما عليك سوى وضع المعلمات بعد المرشح وأضف القولون في الوسط (إذا كانت هناك معلمات متعددة يتم تمريرها ، أضف قولون بعد كل معلمة). على سبيل المثال ، يمكن أن يساعدنا مرشح الأرقام في الحد من عدد الأرقام. إذا كنت ترغب في عرض مكانين عشريين ، إضافة الرقم: 2.

 {{123.456789 | الرقم: 2}}

يستخدم مرشح المرشح بشكل أساسي لتصفية مجموعة من البيانات وإرجاع مجموعة جديدة تحتوي على بيانات الفرعية.

على سبيل المثال ، عند البحث على جانب العميل ، يمكننا تصفية النتائج التي نريدها بسرعة من الصفيف.

تستقبل طريقة التصفية هذه سلسلة أو كائن أو معلمة دالة لتحديد/إزالة عناصر الصفيف.

دعونا نلقي نظرة عليه بالتفصيل:

1. مرشح مدمج

1 ، أقصى ، تحويل الحجم الصغير

 {{"String Cap Lower" | Extrace}} // النتيجة: سلسلة Cap Lower {{"Tank Is Good" | SHIMRASE}} // النتيجة: الخزان جيد

｜ الخط العمودي هنا هو وظيفة خط أنابيب. إذا كنت معتادًا على Linux ، فإن وظيفة خط الأنابيب لهذا الجزء هي نفسها مثل 2 ، تم تنسيق JSON

 {{{foo: "bar" ، baz: 23} | json}} // النتيجة: {"foo": "bar" ، "baz": 23}

ملاحظة: لا يوجد لدى BZA عروض أسعار مزدوجة قبل التنسيق ، ويتم تحويلها إلى بيانات JSON بعد التنسيق.

3. تنسيق التاريخ

mysql timestamp ng-bind = "message.time * 1000 | التاريخ: 'yyyy-mm-dd'"

 {{1304375948024 | التاريخ: 'متوسط'}} // 03 مايو ، 2011 06:39:08 PM {{1304375948024 | تاريخ}} // النتيجة: 3 مايو 2011 {{1304375948024 | التاريخ: "mm/dd/yyyy @ h: mma"}} // النتيجة: 05/03/2011 @ 6:39 am {{1304375948024 | التاريخ: "yyyy-mm-dd hh: mm: ss"}} // النتيجة: 2011-05-03 06:39:08

4. تنسيق الرقم

 {{1.234567 | الرقم: 1}} // النتيجة: 1.2 {{1234567 | الرقم}} // النتيجة: 1،234،567

5. تنسيق العملة

 {{250 | العملة}} // النتيجة: $ 250.00 {{250 | العملة: "RMB ￥"}} // النتيجة: RMB ￥ 250.00

6. يمكن لبحث التصفية التحقق فقط من القيمة ، وليس المفتاح

 {{[{"Age": 20 ، "id": 10 ، "name": "iPhone"} ، {"Age": 12 ، "id": "،" name ":" Sunm Xing "} ، {" Age ": مرشح: 's'}} // ابحث عن صفوف مع s // نتيجة المثال أعلاه: [{"age": 12 ، "id": 11 ، "name": "Sunm Xing"} ، {"Age": 44 ، 12 ، "ID": 11 ، "name": "Sunm Xing"} ، {"Age": 44 ، "ID": 12 ، "name": "Test ABC"}] | FILTER: {'name': 'ip'}}} // ابحث عن سطر الاسم مثل IP // نتيجة مثال أعلاه: [{"Age": 20 ، "id": 10 ، "name": "iPhone"}] $ filter ('number') (30000 ، 2) ؛ var jsonstring = $ filter ('json') ({"Age": 12 ، "id": 11 ، "name": "Sunm Xing"} ، {"Age": 44 ، "id": 12 ،

7.

 {{"أنا أحب الخانق" | limitto: 6}} // النتيجة: أحب {{"أنا أحب الخانق" | limitto: -4}} // النتيجة: Tank {{[{"Age": 20 ، "id": 10 ، "name": "iPhone"} ، {"Age": 12 ، "id": 11 ، "name": Limitto: 1}} // النتيجة: [{"Age": 20 ، "id": 10 ، "name": "iPhone"}]

8. orderby فرز كائن

 {{[{"Age": 20 ، "id": 10 ، "name": "iPhone"} ، {"Age": 12 ، "id": "،" name ":" Sunm Xing "} ، {" Age ": orderby: 'id': true}} // معرف الجذر المتنافس {{[{"age": 20 ، "id": 10 ، "name": "iPhone"} ، {"Age": 12 ، "id": 11 ، "name": orderby: 'id'}} // sorted {{[{"age": 20 ، "id": 10 ، "name": "iPhone"} ، {"Age": 12 ، "id": 11 ، "name": Orderby: ['-Age' ، 'Name']}}

2. وظيفة التصفية المخصصة

طريقة التخصيص للمرشح بسيطة للغاية. استخدم طريقة التصفية للوحدة لإرجاع وظيفة تستقبل قيمة الإدخال وإرجاع النتيجة المعالجة.

 app.filter ('filter name' ، function () {return function (كائن يجب ترشيحه ، معلمة التصفية 1 ، معلمة التصفية 2 ، ...) {//...do بعض الأشياء إرجاع الكائن المعالج ؛}}) ؛

لقد وجدت إطارًا أساسيًا لـ AngularJS MVC و Phonecat و Custom Filter ، والذي يتم كتابته أيضًا على هذا الأساس. هذا الإطار مفيد للغاية.

Filters.js إضافة وحدة نمطية

 Angular.Module ('tanktest' ، []). filter ('tankreplace' ، function () {return function (input) {return input.replace (/tank/، "======")} ؛}) ؛

ودعا في HTML

 {{"Tank Is Good" | صغير | tankreplace}} // النتيجة: ===== جيد

ملاحظة: | أحرف صغيرة | يمكن أن يكون لأوامر خط أنابيب Tankreplace متعددة

 yourapp.filter ('OrderObjectBy' ، function () {function function (الحقل ، عكس) {var filtered = [] } ؛}) ؛

يحول هذا المرشح الكائن إلى صفيف قياسي وفرزه بواسطة الحقول التي تحددها. يمكنك استخدام مرشح OrderObjectBy لتشبه Orderby ، بما في ذلك قيمة منطقية بعد اسم الحقل ، بالترتيب المحدد ما إذا كان ينبغي عكسه. وبعبارة أخرى ، فإن المزيف هو الترتيب الصاعد ، والتراجع الحقيقي. مكالمة HTML

 <li ng-repeat = "العنصر في العناصر | orderObjectBy: 'color': true"> {{item.color}} </li>

فرز البحث

 <type type = "text" ng-model = "search" placeholder = "search"> <thead> <tr> <!-ng-class = "{dropup: true}"-> <th ng-click = "changeorder ('id')" ng-class = "{dropup: order === '' '' "id '}"> </span> </h> <th ng-click = "changeOrder (' name ')" ng-class = "{dropup: order: order' '}"> اسم المنتج <span ng-class = "{ordercolor: ordertype ===' name '} order == ''} "سعر المنتج <span ng-class =" {ordercolor: ordertype === 'price'} " <td> {{item.name}} </td> <td> {{item.price | العملة: '￥'}} </td> </r> </tbody>

AngularJs

 // حقل الفرز الافتراضي $ scope.ordertype = 'id' ؛ $ scope.order = '-' ؛ $ scope.ChangeOrder = function (type) {console.log (type) ؛ $ scope.ordertype = type ؛ if ($ scope.order === '') {$ scope.order = '-' ؛ } آخر {$ scope.order = '' ؛ }}