العرض التوضيحي
هذا هو المثال التجريبي بأكمله
1. Filter.js file
Angular.Module ("examplepap" ، []). ثابت ("Producturl" ، "http: // localhost:/products") .Controller ("defaultCtrl" ، function ($ scope ، $ http ، producturl) {$ http.get (producturl) .success (function) صفيف}) ؛}) ؛هنا أستخدم الخدمة المقدمة على أنها ثابتة ، وميزة كتابة هذا هو أنه يمكنني تعديلها بسهولة.
لكيفية استخدام خدمة $ HTTP ، يرجى الرجوع إلى AngularJS (III) المنتشرة
<! doctype html> <html xmlns = "http://www.w.org//xhtml" ng-app = "examplepp"> <head> <meta http-equiv = "content-type" content = "text/html ؛ src = "Angular.js"> </script> <link href = "bootstrap-theme.css" rel = "STYLESHEET"/> <link href = "bootstrap.csss" rel = "stylesheet"/> <script src = filter.js > <viv> <viv> <h> المنتجات </h> </viv> <tider> <thead> <tr> <td> الاسم </td> <td> الفئة </td> <td> السعر </td> <td> expiry </td> </tr> </thead> <tbody> <tbod ExtraCcase}} </td> <td> {{item.category}} </td> <td> {{item.price | العملة}} </td> <td> {{item.expiry | Number}} </td> <td> {{item | JSON}} </td> </tbody> </tbody> </fable> </viv> </body> </html>نتائج المدى:
استخدام المرشح
يتم تقسيم المرشحات إلى فئتين:
1. تصفية البيانات الفردية
2. تعمل على المجموعة.
1. من السهل نسبيًا تشغيل البيانات . كما هو موضح في العرض التوضيحي ، يمكن تنسيقه في {{item | العملة}} ، إلخ.
العملة: "F" يمكن أن يكون السعر الذي تم ترشيحه إلى جنيه.
يريد مرشح بيانات واحد تصفية تنسيق البيانات ، بعد المرشح: في حرف التنسيق المقابل.
الرقم: يمثل الأماكن العشرية للبيانات محفوظة.
2: تصفية التجميع ، تصفية رقم معين من المجموعة.
في العرض التجريبي الأساسي ، أضفت هذا:
<viv> <h> المنتجات </h> </viv> <viv> الحد: <select ng-model = "limitvalue" ng-options = "p for p in limitrange"> </select> </fiv> تمت إضافة filter.js $ scope.limitvalue = "" ؛ // إذا كانت سلسلة <span style = "background-color: rgb (، ،) ؛"> $ scope.limitrange = [] ؛ for (var i = ؛ i <= $ scope.products.length ؛ i ++) {$ spect.limitrange.push ( } </span> </span>}) ؛ <tr ng-repeat = "item in products | limitto: limitvalue"> <td> {{item.name | ExtraCcase}} </td> <td> {{item.category}} </td> <td> {{item.price | العملة}} </td> <td> {{item.expiry | Number}} </td> <td> {{item | json}} </td> </tr> <span style = "خط الذروة :.عند كتابة الوظائف ، يجب أن تكون مكتوبًا في النجاح لأنه يتم الحصول على بيانات JSON بشكل غير متزامن.
نتيجة:
الحد: يمكنك ضبط عدد المعروض على الصفحة.
إنشاء مرشح
AngularJS لديه مرشحان. أولاً ، يمكننا إنشاء مرشحات تنسيق البيانات الفردية ، مثل: رسمات الحروف الأولى لسلسلة الإخراج.
دعنا نتحدث أولاً عن كيفية تحديد مرشح: يتم إنشاء المرشح من خلال module.filter ، والتنسيق العام للخلق هو:
Angular.Module ("ExamplePapp") // يعني الحصول على وحدة نمطية. يتم إنشاء المرشح تحت الوحدة النمطية.
.filter ("labelcase" ، function () {// استلام معلمتين ، تمثل المعلمة الأولى اسم المرشح ، والثاني هو وظيفة المصنع
وظيفة الإرجاع (القيمة ، عكس) {// إرجاع وظيفة العامل لتصفية عملية التصفية المقابلة. تشير المعلمة الأولى إلى الكائن الذي يحتاج إلى تنسيق ، والمعلمة الثانية تشير إلى التكوين وما هو التنسيق الذي يجب اتباعه.
if (Angular.isstring (value)) {var intermediate = reverse؟ value.toupperCase (): value.toLowerCase () ؛ return (عكس؟ الوسيط []. tolowercase (): وسيطة [].كتبت هذا في ملف JS. لا تنسى CustomFilter.js إضافته.
<link href = "bootstrap.css" rel = "STYLESHEET"/> <script src = "filter.js"> </script> <script src = "customfilter.js"> </script>
حسنًا الآن سأغير البيانات:
<td> {{item.name | Labelcase: True}} </td>كما ذكرنا سابقًا ، إذا كنت بحاجة إلى إضافة معلومات التكوين ، فإن تنسيق الكتابة هو مرشح: الخيار
بالطبع ، لا يمكن كتابة المعلمات الافتراضية ، وسيتم إعطاء القيمة الافتراضية فارغة أو غير محددة.
نتيجة:
من السهل تخصيص وظيفة مرشح لمعالجة كل بيانات.
2. تخصيص الوظائف التي تتم معالجتها بواسطة مجموعة ، تمامًا مثل Limitto.
Angular.Module ("examplePapp"). filter ("labelcase" ، function () {function (value ، revers) {if (Angular.isstring (value)) {var intermediate = reverse؟ intermediate.substr ()) ؛} آخر {قيمة الإرجاع ؛}}}). مرشح ("SKIP" ، Function () {data ، count) {if (Angular.isarray (data) بيانات؛}}})؛الجزء المعدل HTML:
<tr ng-repeat = "item in products | skip:">
النتائج: هناك ما مجموعه ست قطع من البيانات ، وتم تمرير قطعتين باستخدام مرشح تخطي.
عند تخصيص المرشح ، وجدت أنه تم تعريف مرشح. لا أريد تحديده مرارًا وتكرارًا. ماذا علي أن أفعل؟ يمكننا أيضًا استخدام مرشح تم إنشاؤه لإنشائه.
Angular.Module ("examplePapp"). filter ("labelcase" ، function () {function (value ، revers) {if (Angular.isstring (value)) {var intermediate = reverse؟ intermediate.substr ()) ؛} آخر {قيمة الإرجاع ؛}}}). مرشح ("SKIP" ، Function () {data ، count) {if (Angular.isarray (data) Data ؛}}}). مرشح ("Take" ، الوظيفة (مرشح $) {// يمكنك أن ترى أنني أشير إلى الخدمة المدمجة لـ AngularJs في وظيفة المصنع. وظيفة الإرجاع (البيانات ، SkipCount ، takeCount) {// يمكنك معرفة ما إذا كنت قد اجتاز ثلاث معلمات هنا؟ البرمجة.يقوم Filter $ ("Skip") باستدعاء مرشح Skip ، لأنه يرجع وظيفة ، حتى نتمكن من الاستمرار في تمرير المعلمات.
<tr ng-repeat = "item in products | take ::">
نتيجة:
هذه هي الطريقة التي يتم بها المرشح. أليس هذا بسيط جدا؟