مرشحات AngularJS ومرشح AngularJS المخصص مع مثال

ما هو عامل التصفية في AngularJS؟

A تصفية في AngularJS يساعد على تنسيق قيمة التعبير لعرضه للمستخدم دون تغيير التنسيق الأصلي. على سبيل المثال، إذا كنت تريد أن تكون السلسلة الخاصة بك مكتوبة بأحرف صغيرة أو كبيرة، فيمكنك القيام بذلك باستخدام المرشحات. توجد عوامل تصفية مدمجة مثل "الأحرف الصغيرة" و"الأحرف الكبيرة"، والتي يمكنها استرداد إخراج الأحرف الصغيرة والأحرف الكبيرة وفقًا لذلك.

AngularJS مرشح مخصص

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

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

كيفية إنشاء مرشح مخصص في AngularJS

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

نريد التأكد من أنه عندما نعرض السلسلة، سنمرر مرشحًا مخصصًا AngularJS، والتي ستقوم بإلحاق سلسلة أخرى وعرض السلسلة المكتملة للمستخدم.

إنشاء مرشح مخصص في AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">

    This tutorial is {{tutorial | Demofilter}}

</div>
<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.filter('Demofilter',function(){
        return function(input)
        {
            return input + " Tutorial"
        }
    });

    app.controller('DemoController',function($scope){

        $scope.tutorial ="Angular";
     });

</script>

</body>
</html>

شرح الكود

  1. نقوم هنا بتمرير سلسلة "Angular" في متغير عضو يسمى البرنامج التعليمي وإرفاقها بكائن النطاق.
  2. توفر Angular خدمة التصفية التي يمكن استخدامها لإنشاء عامل التصفية المخصص لدينا. "Demofilter" هو الاسم الذي يطلق على مرشحنا.
  3. هذه هي الطريقة القياسية التي يتم بها تعريف المرشحات المخصصة في AngularJS حيث يتم إرجاع الوظيفة. هذه الوظيفة هي التي تحتوي على التعليمات البرمجية المخصصة لإنشاء عامل التصفية المخصص. في وظيفتنا، نأخذ سلسلة "Angular" التي يتم تمريرها من العرض الخاص بنا إلى الفلتر ونلحق السلسلة "Tutorial" بها.
  4. نحن نستخدم Demofilter الخاص بنا على متغير العضو الذي تم تمريره من وحدة التحكم إلى العرض.

إذا تم تنفيذ التعليمات البرمجية بنجاح، فإن following سيتم عرض الإخراج عند تشغيل التعليمات البرمجية الخاصة بك في المتصفح.

الإخراج:

إنشاء مرشح مخصص في AngularJS

من الإخراج،

  • يمكن ملاحظة أنه تم تطبيق عامل التصفية المخصص الخاص بنا و
  • تم إلحاق كلمة "البرنامج التعليمي" في نهاية السلسلة، والتي تم تمريرها في البرنامج التعليمي لمتغير العضو.

مرشح الأحرف الصغيرة في AngularJS

يأخذ هذا المرشح مخرجات السلسلة ويقوم بتنسيق السلسلة ويعرض كافة الأحرف الموجودة في السلسلة كأحرف صغيرة.

دعونا نلقي نظرة على مثال لمرشحات AngularJS مع خيار AngularJS للأحرف الصغيرة.

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

مرشح الأحرف الصغيرة في AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

    <h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
    Tutorial Name : <input type="text" ng-model="tutorialName"><br>
    <br>
    This tutorial is {{tutorialName | lowercase}}

</div>
<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.controller('DemoController',function($scope){

        $scope.tutorialName ="Angular JS";
    });
</script>

</body>
</html>

شرح الكود

  1. نقوم هنا بتمرير سلسلة، وهي عبارة عن مزيج من الأحرف الصغيرة والأحرف الكبيرة في متغير عضو يسمى "tutorialName" وإرفاقه بكائن النطاق. قيمة السلسلة التي يتم تمريرها هي "AngularJS".
  2. نحن نستخدم متغير العضو "tutorialName" ونضع رمز التصفية (|) مما يعني أن الإخراج يحتاج إلى تعديل باستخدام مرشح. نستخدم بعد ذلك الكلمة الأساسية الصغيرة لنقول لاستخدام عامل التصفية المدمج لإخراج السلسلة بأكملها بأحرف صغيرة.

إذا تم تنفيذ التعليمات البرمجية بنجاح، فإن following سيتم عرض الإخراج عند تشغيل التعليمات البرمجية الخاصة بك في المتصفح.

الإخراج:

مرشح الأحرف الصغيرة في AngularJS

من الإخراج

  • يمكن ملاحظة أنه تم تنفيذ السلسلة "AngularJS" التي تم تمريرها في البرنامج التعليمي المتغير والذي كان عبارة عن مزيج من الأحرف الصغيرة والأحرف الكبيرة.
  • بعد التنفيذ، يكون الإخراج النهائي بالأحرف الصغيرة كما هو موضح أعلاه.

مرشح الأحرف الكبيرة في AngularJS

يشبه هذا المرشح عامل التصفية الصغير؛ الفرق هو أنه يأخذ إخراج سلسلة وينسق السلسلة ويعرض جميع الأحرف في السلسلة بأحرف كبيرة.

دعونا نلقي نظرة على مثال لمرشح الكتابة بالأحرف الكبيرة AngularJS مع خيار الأحرف الصغيرة.

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

مرشح الأحرف الكبيرة في AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

    <h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
    Tutorial Name : <input type="text" ng-model="tutorialName"><br>
    <br>
    This tutorial is {{tutorialName | uppercase}}

</div>
<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.controller('DemoController',function($scope){

        $scope.tutorialName ="Angular JS";
    });
</script>

</body>
</html>

شرح الكود

  1. نقوم هنا بتمرير سلسلة عبارة عن مزيج من الأحرف الصغيرة والكبيرة "Angular JS" في متغير عضو يسمى "tutorialName" وإرفاقه بكائن النطاق.
  2. نحن نستخدم متغير العضو "tutorialName" ونضع رمز التصفية (|)، مما يعني أن الإخراج يحتاج إلى تعديل باستخدام مرشح. نستخدم بعد ذلك الكلمة الأساسية ذات الأحرف الكبيرة لنقول لاستخدام عامل التصفية المدمج لإخراج السلسلة بأكملها بأحرف كبيرة.

إذا تم تنفيذ التعليمات البرمجية بنجاح، فإن following سيتم عرض الإخراج عند تشغيل التعليمات البرمجية الخاصة بك في المتصفح.

الإخراج:

مرشح الأحرف الكبيرة في AngularJS

من الإخراج،

  • يمكن ملاحظة أن السلسلة التي تم تمريرها في المتغير TutorialName والتي كانت عبارة عن مزيج من الأحرف الصغيرة والأحرف الكبيرة قد تم إخراجها بأحرف كبيرة.

تصفية الأرقام في AngularJS

يقوم عامل التصفية هذا بتنسيق رقم ويمكنه تطبيق حد على النقاط العشرية لرقم.

دعونا نلقي نظرة على مثال لمرشحات AngularJS مع خيار الرقم.

في المثال أدناه ،

أردنا أن نعرض كيف يمكننا استخدام مرشح الأرقام لتنسيق رقم لعرضه مع تقييد منزلتين عشريتين.

سوف نستخدم وحدة تحكم لإرسال رقم إلى طريقة عرض عبر كائن النطاق. سنستخدم بعد ذلك عامل تصفية في العرض لتطبيق مرشح الأرقام.

تصفية الأرقام في AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">

    This tutorialID is {{tutorialID | number:2}}

</div>
<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.controller('DemoController',function($scope){

        $scope.tutorialID =3.565656;
    });
</script>

</body>
</html>

شرح الكود

  1. نقوم هنا بتمرير رقم يحتوي على عدد أكبر من المنازل العشرية في متغير عضو يسمى معرف البرنامج التعليمي وإرفاقه بكائن النطاق.
  2. نحن نستخدم معرف البرنامج التعليمي لمتغير العضو ونضع رمز عامل التصفية (|) مع عامل تصفية الأرقام. الآن في الرقم:2، يشير الرقمان إلى أن المرشح يجب أن يقيد عدد المنازل العشرية بـ 2.

إذا تم تنفيذ التعليمات البرمجية بنجاح، فإن following سيتم عرض الإخراج عند تشغيل التعليمات البرمجية الخاصة بك في المتصفح.

الإخراج:

تصفية الأرقام في AngularJS

من الإخراج،

  • يمكن ملاحظة أن الرقم الذي تم تمريره في معرف البرنامج التعليمي المتغير والذي يحتوي على عدد كبير من النقاط العشرية قد تم تحديده بمنزلتين عشريتين بسبب الرقم: مرشحان تم تطبيقهما.

تصفية العملة في AngularJS

يقوم عامل التصفية هذا بتنسيق عامل تصفية العملة لرقم.

لنفترض أنك إذا أردت عرض رقم بعملة مثل $، فيمكن استخدام هذا الفلتر.

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

تصفية العملة في AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">

    This tutorial Price is {{tutorialprice | currency}}

</div>
<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.controller('DemoController',function($scope){

        $scope.tutorialprice =20.56;
    });
</script>

</body>
</html>

شرح الكود

  1. نحن هنا نقوم بتمرير رقم في متغير عضو يسمى Tutorialprice ونرفقه بكائن النطاق.
  2. نحن نستخدم سعر البرنامج التعليمي لمتغير العضو ونضع رمز التصفية (|) مع مرشح العملة. لاحظ أن العملة التي يتم تطبيقها تعتمد على إعدادات اللغة المطبقة على الجهاز.

إذا تم تنفيذ التعليمات البرمجية بنجاح، فإن following سيتم عرض الإخراج عند تشغيل التعليمات البرمجية الخاصة بك في المتصفح.

الإخراج:

تصفية العملة في AngularJS

من الإخراج

  • يمكن ملاحظة أن رمز العملة قد تم إلحاقه بالرقم الذي تم تمريره في السعر التعليمي المتغير.
  • في حالتنا، نظرًا لأن إعدادات اللغة هي الإنجليزية (الولايات المتحدة)، يتم إدراج الرمز $ كعملة.

مرشح JSON في AngularJS

يقوم هذا الفلتر بتنسيق أ JSON مثل الإدخال وتطبيق مرشح AngularJS JSON لإعطاء الإخراج في JSON.

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

مرشح JSON في AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">

    This tutorial is {{tutorial | json}}

</div>
<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.controller('DemoController',function($scope){

        $scope.tutorial ={TutorialID:12,tutorialName:"Angular"};
    });
</script>

</body>
</html>

شرح الكود

  1. نحن هنا نقوم بتمرير رقم في متغير عضو يسمى "البرنامج التعليمي" ونرفقه بكائن النطاق. يحتوي متغير العضو هذا على سلسلة من نوع JSON بمعرف البرنامج التعليمي: 12 واسم البرنامج التعليمي: "Angular".
  2. نحن نستخدم البرنامج التعليمي لمتغير العضو ونضع رمز التصفية (|) مع مرشح JSON.

إذا تم تنفيذ التعليمات البرمجية بنجاح، فإن following سيتم عرض الإخراج عند تشغيل التعليمات البرمجية الخاصة بك في المتصفح.

الإخراج:

مرشح JSON في AngularJS

من الإخراج،

  • يمكن ملاحظة أن JSON مثل السلسلة قد تم تحليلها وعرض كائن JSON مناسب في المتصفح.

نبذة عامة

  • يتم استخدام المرشحات لتغيير طريقة عرض المخرجات للمستخدم.
  • يوفر Angular مرشحات مدمجة مثل مرشحات الأحرف الصغيرة والأحرف الكبيرة لتغيير إخراج السلاسل إلى أحرف صغيرة وكبيرة على التوالي.
  • يوجد أيضًا بند لتغيير طريقة عرض الأرقام باستخدام مرشح الأرقام من خلال تحديد عدد النقاط العشرية التي سيتم عرضها في الرقم.
  • يمكن للمرء أيضًا استخدام مرشح العملة لإلحاق رمز العملة بأي رقم.
  • إذا كان هناك متطلب للحصول على مخرجات محددة لـ JSON، فإن angular توفر أيضًا مرشح JSON لتصفية أي سلسلة تشبه JSON إلى تنسيق JSON.
  • إذا كان هناك متطلبات لم يتم تلبيتها بواسطة أي من المرشحات المحددة في الزاوي، فيمكنك إنشاء عامل التصفية المخصص الخاص بك وإضافة التعليمات البرمجية المخصصة الخاصة بك لتحديد نوع الإخراج الذي تريده من عامل التصفية.