ตัวกรอง AngularJS และตัวกรองแบบกำหนดเอง AngularJS พร้อมตัวอย่าง

ตัวกรองใน AngularJS คืออะไร

A กรองใน AngularJS ช่วยจัดรูปแบบค่าของนิพจน์เพื่อแสดงให้ผู้ใช้เห็นโดยไม่ต้องเปลี่ยนรูปแบบเดิม ตัวอย่างเช่น หากคุณต้องการให้สตริงเป็นตัวพิมพ์เล็กหรือตัวพิมพ์ใหญ่ คุณสามารถทำได้โดยใช้ตัวกรอง มีตัวกรองในตัว เช่น 'ตัวพิมพ์เล็ก', 'ตัวพิมพ์ใหญ่' ซึ่งสามารถดึงข้อมูลเอาต์พุตตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ตามลำดับ

ตัวกรองแบบกำหนดเอง AngularJS

บางครั้งตัวกรองในตัวใน Angular ไม่สามารถตอบสนองความต้องการหรือข้อกำหนดสำหรับการกรองเอาต์พุต ในกรณีเช่นนี้ คุณสามารถสร้างตัวกรองที่กำหนดเองของ AngularJS ซึ่งสามารถส่งผ่านเอาต์พุตในลักษณะที่ต้องการได้

ในทำนองเดียวกัน คุณสามารถใช้ตัวกรองอื่นสำหรับตัวเลขได้ ในบทช่วยสอนนี้ เราจะดูตัวกรองมาตรฐานต่างๆ ที่มีอยู่ใน Angular

วิธีสร้างตัวกรองแบบกำหนดเองใน 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>

คำอธิบายรหัส

ที่นี่เรากำลังส่งสตริง "Angular" ในตัวแปรสมาชิกที่เรียกว่าบทช่วยสอนและแนบมันเข้ากับวัตถุขอบเขต
Angular ให้บริการตัวกรองซึ่งสามารถใช้เพื่อสร้างตัวกรองที่กำหนดเองของเรา 'Demofilter' คือชื่อที่ตั้งให้กับตัวกรองของเรา
นี่เป็นวิธีมาตรฐานในการกำหนดตัวกรองแบบกำหนดเองใน AngularJS โดยที่ฟังก์ชันจะถูกส่งกลับ ฟังก์ชันนี้คือสิ่งที่มีโค้ดแบบกำหนดเองเพื่อสร้างตัวกรองแบบกำหนดเอง ในฟังก์ชันของเรา เรากำลังนำสตริง “Angular” ซึ่งถูกส่งผ่านจากมุมมองของเราไปยังตัวกรอง และเพิ่มสตริง “Tutorial” ต่อท้ายสิ่งนี้
เรากำลังใช้ Demofilter กับตัวแปรสมาชิกของเราซึ่งส่งผ่านจากคอนโทรลเลอร์ไปยังมุมมอง

หากโค้ดถูกดำเนินการสำเร็จ ผลลัพธ์ต่อไปนี้จะปรากฏขึ้นเมื่อคุณรันโค้ดในเบราว์เซอร์

Output:

จากผลลัพธ์ที่ได้

จะเห็นได้ว่ามีการใช้ตัวกรองแบบกำหนดเองของเราแล้วและ
คำว่า 'บทช่วยสอน' ถูกต่อท้ายที่ท้ายสตริง ซึ่งถูกส่งผ่านในบทช่วยสอนตัวแปรสมาชิก

ตัวกรองตัวพิมพ์เล็กใน 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>

คำอธิบายรหัส

ที่นี่เรากำลังส่งสตริงซึ่งเป็นการรวมกันของอักขระตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ในตัวแปรสมาชิกที่เรียกว่า "tutorialName" และแนบไปกับวัตถุขอบเขต ค่าของสตริงที่ถูกส่งคือ “AngularJS”
เรากำลังใช้ตัวแปรสมาชิก “tutorialName” และใส่สัญลักษณ์ตัวกรอง (|) ซึ่งหมายความว่าจำเป็นต้องแก้ไขเอาต์พุตโดยใช้ตัวกรอง จากนั้นเราใช้คีย์เวิร์ดตัวพิมพ์เล็กเพื่อบอกว่าให้ใช้ตัวกรองในตัวเพื่อส่งออกสตริงทั้งหมดเป็นตัวพิมพ์เล็ก

Output:

จากเอาท์พุต

จะเห็นได้ว่าสตริง “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">
    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>

คำอธิบายรหัส

ที่นี่เรากำลังส่งสตริงซึ่งเป็นการรวมกันของอักขระตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ “Angular JS” ในตัวแปรสมาชิกที่เรียกว่า “tutorialName” และแนบไปกับวัตถุขอบเขต
เรากำลังใช้ตัวแปรสมาชิก “tutorialName” และใส่สัญลักษณ์ตัวกรอง (|) ซึ่งหมายความว่าจำเป็นต้องแก้ไขเอาต์พุตโดยใช้ตัวกรอง จากนั้นเราใช้คีย์เวิร์ดตัวพิมพ์ใหญ่เพื่อบอกว่าใช้ตัวกรองในตัวเพื่อส่งออกสตริงทั้งหมดเป็นตัวพิมพ์ใหญ่

Output:

จากผลลัพธ์ที่ได้

จะเห็นได้ว่าสตริงที่ถูกส่งผ่านในตัวแปร TutorialName ซึ่งเป็นการรวมกันของอักขระตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ได้ถูกส่งออกเป็นตัวพิมพ์ใหญ่ทั้งหมด

ตัวกรองตัวเลขใน AngularJS

ตัวกรองนี้จะจัดรูปแบบตัวเลขและสามารถใช้ขีดจำกัดจุดทศนิยมสำหรับตัวเลขได้

ลองดูตัวอย่างตัวกรอง AngularJS ที่มีตัวเลือกตัวเลข

ในตัวอย่างด้านล่าง

เราต้องการแสดงให้เห็นว่าเราสามารถใช้ตัวกรองตัวเลขเพื่อจัดรูปแบบตัวเลขที่จะแสดงโดยจำกัดทศนิยม 2 ตำแหน่งได้อย่างไร

เราจะใช้ตัวควบคุมเพื่อส่งตัวเลขไปยังมุมมองผ่านวัตถุขอบเขต จากนั้นเราจะใช้ตัวกรองในมุมมองเพื่อใช้ตัวกรองตัวเลข

<!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>

คำอธิบายรหัส

ที่นี่เรากำลังส่งตัวเลขที่มีตำแหน่งทศนิยมมากกว่าในตัวแปรสมาชิกที่เรียกว่า TutorialID และแนบไปกับวัตถุขอบเขต
เรากำลังใช้ TutorialID ตัวแปรสมาชิกและใส่สัญลักษณ์ตัวกรอง (|) พร้อมกับตัวกรองตัวเลข ขณะนี้อยู่ในตัวเลข:2 ทั้งสองบ่งชี้ว่าตัวกรองควรจำกัดจำนวนตำแหน่งทศนิยมไว้ที่ 2

Output:

จากผลลัพธ์ที่ได้

จะเห็นได้ว่าตัวเลขที่ส่งผ่านในตัวแปร TutorialID ซึ่งมีจุดทศนิยมจำนวนมากถูกจำกัดไว้ที่ทศนิยม 2 ตำแหน่ง เนื่องจากตัวเลข: 2 ตัวกรองที่ใช้

ตัวกรองสกุลเงินใน 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>

คำอธิบายรหัส

ที่นี่เรากำลังส่งตัวเลขในตัวแปรสมาชิกที่เรียกว่า Tutorialprice และแนบไปกับวัตถุขอบเขต
เรากำลังใช้ราคาการสอนตัวแปรสมาชิกและใส่สัญลักษณ์ตัวกรอง (|) พร้อมกับตัวกรองสกุลเงิน โปรดทราบว่าสกุลเงินที่ใช้นั้นขึ้นอยู่กับการตั้งค่าภาษาที่ใช้กับเครื่อง

Output:

จากเอาท์พุต

จะเห็นได้ว่ามีการเพิ่มสัญลักษณ์สกุลเงินเข้ากับตัวเลขที่ถูกส่งผ่านในตัวแปรราคาการสอน
ในกรณีของเรา เนื่องจากการตั้งค่าภาษาเป็นภาษาอังกฤษ (สหรัฐอเมริกา) จึงใส่สัญลักษณ์ $ เป็นสกุลเงิน

ตัวกรอง JSON ใน AngularJS

ตัวกรองนี้จัดรูปแบบก JSON เช่นอินพุตและใช้ตัวกรอง AngularJS JSON เพื่อให้เอาต์พุตใน JSON

ในตัวอย่างด้านล่าง เราจะใช้ตัวควบคุมเพื่อส่งออบเจ็กต์ประเภท JSON ไปยังมุมมองผ่านออบเจ็กต์ขอบเขต จากนั้นเราจะใช้ตัวกรองในมุมมองเพื่อใช้ตัวกรอง JSON

<!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>

คำอธิบายรหัส

ที่นี่เรากำลังส่งตัวเลขในตัวแปรสมาชิกที่เรียกว่า "บทช่วยสอน" และแนบไปกับวัตถุขอบเขต ตัวแปรสมาชิกนี้มีสตริงประเภท JSON ของ Tutorial ID:12 และ TutorialName:”Angular”
เรากำลังใช้บทช่วยสอนตัวแปรสมาชิกและใส่สัญลักษณ์ตัวกรอง (|) พร้อมกับตัวกรอง JSON

Output:

จากผลลัพธ์ที่ได้

จะเห็นได้ว่า JSON เหมือนกับสตริง จะถูกแยกวิเคราะห์และแสดงเป็นวัตถุ JSON ที่เหมาะสมในเบราว์เซอร์

สรุป

ตัวกรองใช้เพื่อเปลี่ยนวิธีแสดงเอาท์พุตให้ผู้ใช้เห็น
Angular มีตัวกรองในตัว เช่น ตัวกรองตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ เพื่อเปลี่ยนเอาต์พุตของสตริงเป็นตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ตามลำดับ
นอกจากนี้ ยังมีการจัดเตรียมสำหรับการเปลี่ยนแปลงวิธีแสดงตัวเลขโดยใช้ตัวกรองตัวเลข โดยระบุจำนวนจุดทศนิยมที่ต้องการแสดงในตัวเลข
ท่านสามารถใช้ตัวกรองสกุลเงินเพื่อผนวกสัญลักษณ์สกุลเงินเข้ากับตัวเลขใดๆ ก็ได้
หากมีข้อกำหนดที่จะต้องมีเอาต์พุตเฉพาะของ JSON เชิงมุมยังมีตัวกรอง JSON สำหรับการกรอง JSON เช่นสตริงเป็นรูปแบบ JSON
หากมีข้อกำหนดที่ไม่ตรงตามตัวกรองใดๆ ที่กำหนดไว้ในเชิงมุม คุณสามารถสร้างตัวกรองแบบกำหนดเองและเพิ่มโค้ดแบบกำหนดเองเพื่อกำหนดประเภทของเอาต์พุตที่คุณต้องการจากตัวกรองได้

ที่คุณอาจชอบ:

ตัวกรองใน AngularJS คืออะไร

ตัวกรองแบบกำหนดเอง AngularJS

วิธีสร้างตัวกรองแบบกำหนดเองใน AngularJS

คำอธิบายรหัส

บทความที่เกี่ยวข้อง

ตัวกรองตัวพิมพ์เล็กใน AngularJS

คำอธิบายรหัส

ตัวกรองตัวพิมพ์ใหญ่ใน AngularJS

คำอธิบายรหัส

ตัวกรองตัวเลขใน AngularJS

คำอธิบายรหัส

ตัวกรองสกุลเงินใน AngularJS

คำอธิบายรหัส

ตัวกรอง JSON ใน AngularJS

คำอธิบายรหัส

สรุป