تفسير ملفات التصفية في AngularJS مع أمثلة للكود

　　　　 واحدة من المزايا الأخرى لـ AngularJS هي تقديم المرشحات، حيث يمكن تنفيذ عمليات على نتائج البيانات باستخدام طريقة أنبوب UNIX.

　　من خلال استخدام الأنابيب، يمكن سهولة ربط البيانات المتبادلة بين العرض.

　　تقوم المرشحات بتحويل البيانات إلى شكل جديد أثناء عملية المعالجة، ويمكن استخدام أنماط الأنابيب هذا التسلسل، كما يمكنها قبول معلمات إضافية.

　　طريقة التنفيذ

　　لنلق نظرة الآن على كيفية تعريف إعلان المرشح، أولاً يجب أن نخلق module الخاص بنا myAppModule

　　　　　　　　　　　　　　　　　　 var myAppModule=agular.module("myApp",[]);

　　الآن، بناءً على الأساس، قم بإنشاء مرشح:

myAppModule.filter("reverse",function(){
　　　　　　　　　　　
});

　　أحداها هو اسم المرشح، يتبعه إعلان طريقة المرشح، وفي طريقة العودة يوجد طريقة أخرى:

myAppModule.filter("reverse",function(){
        return function(input,uppercase){
          var out = "";
          for(var i=0 ; i<input.length; i++){
            out = input.charAt(i)+out;
          }
          if(uppercase){
            out = out.toUpperCase();
          }
          return out;
        }
      });

　　يحتوي الطريقة التي يتم توفيرها داخلها على اثنين من المعلمات، واحدة هي القيمة المدخلة، وهي القيمة التي نتلقاها في مرشحنا.

　　إذا كنت ترغب في تنفيذ المبدأ التالي للمرشحات:

　　name | reverse

　　ثم input هي القيمة التي يمثلها الاسم.

　　المعلمات التالية اختيارية، نحن هنا نمتد الفئة uppercase هذا boolean لتحديد ما إذا كان يجب إجراء تحويلات الحروف العليا والسفلاء.

　　الكود المطبق داخلياً لا يحتاج إلى تفسير. فقط عاود الإرجاع النص الم经过 الفلترة.

　　برنامج نموذجي

<!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">
      name:{{ name }}<br>
      reverse name:{{ name | reverse }}<br>
      reverse&uppercase name:{{ name | reverse:true }}
    </div>
    <script type="text/javascript">
      var myAppModule = angular.module("myApp",[]);
      myAppModule.controller("myAppCtrl",["$scope",function($scope){
        $scope.name = "xingoo";
      });
      myAppModule.filter("reverse",function(){
        return function(input,uppercase){
          var out = "";
          for(var i=0 ; i<input.length; i++){
            out = input.charAt(i)+out;
          }
          if(uppercase){
            out = out.toUpperCase();
          }
          return out;
        }
      });
    </script>
  </body>
</html>

　　نتيجة التنفيذ

هذا هو جمع المعلومات حول ملفات التصفية المخصصة لـ AngularJS، سيتم إكمال المزيد من المعلومات ذات الصلة لاحقًا، شكرًا للجميع على دعم هذا الموقع!

البيان: محتوى هذا المقال تم جمعه من الإنترنت، ملكية المادة تخص المالك الأصلي، المادة تم تقديمها من قبل مستخدمي الإنترنت بتحميلهمها بشكل تلقائي، هذا الموقع لا يملك حقوق الملكية، لم يتم تعديل المحتوى بشكل يدوي، ولا يتحمل أي مسؤولية قانونية متعلقة بذلك. إذا كنت قد وجدت محتوى يشتبه في انتهاك حقوق النسخ، فنرجو منك إرسال بريد إلكتروني إلى notice#oldtoolbag.com (عند إرسال البريد الإلكتروني، يرجى استبدال #بـ @) لإبلاغنا، وقدم الدليل على ذلك، إذا تم التحقق من ذلك، سيتم حذف المحتوى المشبوه فورًا.

دروس الأساس

توصيات لك