في عالم 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:084. تنسيق الرقم
{{1.234567 | الرقم: 1}} // النتيجة: 1.2 {{1234567 | الرقم}} // النتيجة: 1،234،5675. تنسيق العملة
{{250 | العملة}} // النتيجة: $ 250.00 {{250 | العملة: "RMB ¥"}} // النتيجة: RMB ¥ 250.006. يمكن لبحث التصفية التحقق فقط من القيمة ، وليس المفتاح
{{[{"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 = '' ؛ }}