ميزة أخرى من AngularJS هي أنه يوفر مرشحات يمكنها تشغيل نتائج البيانات عن طريق تشغيل خط الأنابيب تحت UNIX.
باستخدام خطوط الأنابيب ، يمكن تسهيل عرض طرق العرض في ربط البيانات ثنائية الاتجاه.
أثناء المعالجة ، يقوم المرشح بتحويل البيانات إلى تنسيق جديد ، ويمكنه استخدام نمط سلسلة خطوط الأنابيب وقبول معلمات إضافية.
طريقة التنفيذ
دعونا نلقي نظرة على كيفية تحديد مرشح وإعلانه. أولاً ، ما زلنا بحاجة إلى إنشاء وحدة MyAppModule الخاصة بنا
var myappmodule = agular.module ("myapp" ، []) ؛
بعد ذلك ، بناءً على الوحدة النمطية ، قم بإنشاء مرشح:
myappmodule.filter ("عكس" ، وظيفة () {
}) ؛
عندما يكون العكس اسم المرشح ، يليه إعلان الطريقة للمرشح ، ويتم إرجاع طريقة أخرى في الطريقة:
myappmodule.filter ("reverse" ، function () {function function (inport ، uppercase) {var out = "" ؛ for (var i = 0 ؛ i <input.length ؛ i ++) {out = input.charat (i)+out ؛} if (upprice) {out.تحتوي الطريقة الداخلية التي تم إرجاعها على معلمتين ، إحداها هي قيمة الإدخال ، وهي القيمة المقبولة بواسطة مرشحنا.
إذا كنت ترغب في تنفيذ المرشح التالي:
الاسم | يعكس
ثم الإدخال هو القيمة الممثلة بالاسم.
المعلمات التالية اختيارية. نحن هنا نقبل قيمة Bool للأحرف الكبيرة ونحدد ما إذا كان سيتم تحويل الحالة.
ليست هناك حاجة لشرح الكود الداخلي. وأخيرا ، أعد السلسلة المصفاة.
عينة البرنامج
<! doctype html> <html ng-app = "myapp"> <head> <meta http-equiv = "content-type" content = "text /html ؛ charset = utf-8" /> <script src = "http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"> </script> </head> <body> <div ng-controller = "myappctrl"> الاسم: {{}}}}} عكس}} <br> الاسم العكسي والكبير: {{name | عكس: true}} </div> <script type = "text/javaScript"> var myappmodule = Angular.Module ("myapp" ، []) ؛ myappmodule.controller ("myappctrl" ، ["$ scope" ، function ($ scope) {$ scope.name = "xingoo ؛}]) ؛ myappmodule.filter ("reverse" ، function () {function function (inport ، uppercase) {var out = "" ؛ for (var i = 0 ؛ i <input.length ؛ i ++) {out = input.charat (i)+out ؛} if (upprice) {out. </script> </body> </html>نتائج التشغيل
ما ورد أعلاه عبارة عن مجموعة من المعلومات حول مرشحات AngularJS المخصصة. سنستمر في إضافة المعلومات ذات الصلة في المستقبل. شكرا لك على دعمك لهذا الموقع!