คำสั่ง AngularJS ng-click, ng-show & ng-hide พร้อมตัวอย่าง

โดย: เจมส์ ฮาร์ทแมน เจมส์ ฮาร์ทแมน
Hours วันที่อัพเดท

เหตุการณ์ AngularJS

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

เมื่อสร้างแอปพลิเคชันบนเว็บ เร็วหรือช้า แอปพลิเคชันของคุณจะต้องจัดการกับเหตุการณ์ DOM เช่น การคลิกเมาส์ การเคลื่อนไหว การกดแป้นพิมพ์ เหตุการณ์การเปลี่ยนแปลง ฯลฯ

AngularJS สามารถเพิ่มฟังก์ชันการทำงานที่สามารถใช้เพื่อจัดการกับเหตุการณ์ดังกล่าวได้

ตัวอย่างเช่น หากมีปุ่มบนเพจและคุณต้องการประมวลผลบางอย่างเมื่อมีการคลิกปุ่ม เราสามารถใช้คำสั่งเหตุการณ์ Angular ng-click ได้

เราจะพิจารณาคำสั่งกิจกรรมโดยละเอียดในระหว่างหลักสูตรนี้

คำสั่ง ng-click ใน AngularJS คืออะไร

เค้ก “คำสั่ง ng-คลิก” ใน AngularJS ใช้เพื่อใช้พฤติกรรมที่กำหนดเองเมื่อมีการคลิกองค์ประกอบใน HTML โดยปกติคำสั่งนี้จะใช้สำหรับปุ่มต่างๆ เนื่องจากเป็นเรื่องธรรมดาที่สุดในการเพิ่มเหตุการณ์ที่ตอบสนองต่อการคลิกที่ดำเนินการโดยผู้ใช้ นอกจากนี้ยังใช้เพื่อแจ้งเตือนป๊อปอัปเมื่อมีการคลิกปุ่ม

ไวยากรณ์ของ ng-click ใน AngularJS

<element
 ng-click="expression">
</element>

มาดูตัวอย่างง่ายๆ ว่าเราจะนำเหตุการณ์การคลิกไปใช้ได้อย่างไร

ตัวอย่างของ ng-click ใน AngularJS

ในตัวอย่าง ng-click นี้ เราจะมีตัวแปรตัวนับซึ่งจะเพิ่มขึ้นเมื่อผู้ใช้คลิกปุ่ม

ng คลิกคำสั่งใน AngularJS
ตัวอย่างการคลิก ng ใน AngularJS
<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body ng-app="">

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

<h1> Guru99 Global Event</h1>

<button ng-click="count = count + 1" ng-init="count=0">
    Increment
</button>

<div>The Current Count is {{count}}</div>

</body>
</html>

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

  1. ขั้นแรกเราใช้คำสั่ง ng-init เพื่อตั้งค่าของตัวแปรท้องถิ่นให้เป็น 0
  2. จากนั้นเราจะแนะนำคำสั่งเหตุการณ์ ng-click ให้กับปุ่ม ในคำสั่งนี้ เรากำลังเขียนโค้ดเพื่อเพิ่มค่าของตัวแปรนับขึ้น 1
  3. ที่นี่เรากำลังแสดงค่าของตัวแปรนับให้กับผู้ใช้

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

Output:

ng คลิกใน AngularJS

จากผลลัพธ์ข้างต้น

  • เราจะเห็นได้ว่าปุ่ม “เพิ่ม” แสดงขึ้นมา และค่าตัวแปรนับเป็นศูนย์ในตอนแรก
  • เมื่อคุณคลิกที่ปุ่มเพิ่ม ค่าของการนับจะเพิ่มขึ้นตามที่แสดงในภาพที่ส่งออกด้านล่าง

ng คลิกใน AngularJS

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

คำสั่ง ng-show ใน AngularJS คืออะไร?

เค้ก คำสั่ง ng-แสดง ใน AngularJS ใช้เพื่อแสดงหรือซ่อนข้อมูลเฉพาะที่กำหนด HTML องค์ประกอบตามนิพจน์ที่ให้ไว้กับแอตทริบิวต์ ng-show ในพื้นหลัง องค์ประกอบ HTML จะแสดงหรือซ่อนโดยการลบหรือเพิ่มคลาส CSS .ng-hide ลงในองค์ประกอบ เป็นคลาส CSS ที่กำหนดไว้ล่วงหน้าซึ่งตั้งค่าการแสดงผลเป็นไม่มี

ไวยากรณ์ของ ng-show ใน AngularJS

<element
 ng-show="expression">
</element>

ในเบื้องหลัง องค์ประกอบจะแสดงหรือซ่อนโดยการลบหรือเพิ่มคลาส CSS .ng-hide ลงในองค์ประกอบ

ตัวอย่างของ ng-show ใน AngularJS

มาดู ng-show ใน Angular Example ว่าเราสามารถใช้คำสั่ง “ngshow event” เพื่อแสดงองค์ประกอบที่ซ่อนอยู่ได้อย่างไร

คำสั่ง ng-show ใน AngularJS

ตัวอย่างการแสดง ng ใน Angular
<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular.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">
    <input type="button" value="Show Angular" ng-click="ShowHide()"/>

    <br><br><div ng-show = "IsVisible">Angular</div>
</div>

<script type="text/javascript">

    var app = angular.module('DemoApp',[]);

    app.controller('DemoController',function($scope){
        $scope.IsVisible = false;

        $scope.ShowHide = function(){
            $scope.IsVisible = true;
        }
        });
</script>

</body>
</html>

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

  1. เรากำลังแนบคำสั่งเหตุการณ์ ng-click เข้ากับองค์ประกอบปุ่ม ที่นี่เรากำลังอ้างอิงฟังก์ชันที่เรียกว่า "ShowHide" ซึ่งกำหนดไว้ในคอนโทรลเลอร์ของเรา - DemoController
  2. เรากำลังแนบแอตทริบิวต์ ng-show เข้ากับแท็ก div ซึ่งมีข้อความ Angular นี่คือแท็กที่เราจะแสดง/ซ่อนตามแอตทริบิวต์ ng-show
  3. ในตัวควบคุม เรากำลังแนบตัวแปรสมาชิก "IsVisible" เข้ากับอ็อบเจ็กต์ขอบเขต แอตทริบิวต์นี้จะถูกส่งไปยังแอตทริบิวต์เชิงมุม ng-show (ขั้นตอนที่ 2) เพื่อควบคุมการมองเห็นของตัวควบคุม div ในเบื้องต้น เราจะตั้งค่านี้เป็น false เพื่อให้แท็ก div จะถูกซ่อนเมื่อแสดงหน้าเป็นครั้งแรก หมายเหตุ: - เมื่อแอตทริบิวต์ ng-show ถูกตั้งค่าเป็นจริง ผู้ใช้จะแสดงการควบคุมในภายหลังซึ่งในกรณีของเราคือแท็ก div เมื่อแอตทริบิวต์ ng-show ถูกตั้งค่าเป็นเท็จ การควบคุมจะถูกซ่อนไม่ให้ผู้ใช้เห็น
  4. เรากำลังเพิ่มโค้ดให้กับฟังก์ชัน ShowHide ซึ่งจะตั้งค่าตัวแปรสมาชิก IsVisible ให้เป็นจริง เพื่อให้ AngularJS แสดงซ่อน div บนแท็กคลิกสามารถแสดงให้ผู้ใช้เห็นได้

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

เอาท์พุท: 1

คำสั่ง ng-show ใน AngularJS

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

  • ในตอนแรก คุณจะเห็นว่าแท็ก div ซึ่งมีข้อความ “AngularJS” จะไม่แสดง และนี่เป็นเพราะว่าออบเจ็กต์ขอบเขต isVisible ถูกตั้งค่าเป็นเท็จในตอนแรก ซึ่งต่อมาจะส่งต่อไปยังคำสั่ง ng-show ของแท็ก div
  • เมื่อคุณคลิกที่ปุ่ม “แสดง AngularJS” มันจะเปลี่ยนตัวแปรสมาชิก isVisible ให้กลายเป็นจริง และด้วยเหตุนี้ข้อความ “Angular” จึงจะปรากฏแก่ผู้ใช้ ผลลัพธ์ด้านล่างนี้จะแสดงให้ผู้ใช้เห็น

คำสั่ง ng-show ใน AngularJS

ผลลัพธ์จะแสดงแท็ก div พร้อมข้อความเชิงมุม

คำสั่ง ng-hide ใน AngularJS คืออะไร?

เค้ก คำสั่ง ng-hide ใน AngularJS เป็นฟังก์ชันที่ใช้องค์ประกอบจะถูกซ่อนหากนิพจน์เป็น TRUE ถ้า Expression เป็น FALSE องค์ประกอบนั้นก็จะถูกแสดง ในพื้นหลัง องค์ประกอบจะแสดงหรือซ่อนโดยการลบหรือเพิ่มคลาส CSS .ng-hide ลงในองค์ประกอบ

ไวยากรณ์ของ ng-hide ใน AngularJS

<element
 ng-hide="expression">
</element>

ในทางกลับกัน ng-hide องค์ประกอบจะถูกซ่อนหากนิพจน์เป็นจริง และจะแสดงหากเป็นเท็จ

ตัวอย่างของ ng-hide ใน AngularJS

ลองดูตัวอย่าง ng-hide ที่คล้ายกันกับตัวอย่างที่แสดงสำหรับ ngShow เพื่อแสดงให้เห็นว่าแอตทริบิวต์ ng-hide และ ng-show สามารถนำมาใช้ได้อย่างไร

คำสั่ง ng-hide ใน AngularJS

ตัวอย่างของ ng-hide ใน 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.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">
    <input type="button" value="Hide Angular" ng-click="ShowHide()"/>

    <br><br><div ng-hide="IsVisible">Angular</div>
</div>

<script type="text/javascript">

    var app = angular.module('DemoApp',[]);

    app.controller('DemoController',function($scope){
        $scope.IsVisible = false;

        $scope.ShowHide = function(){
            $scope.IsVisible = $scope.IsVisible = true;
        }
        });
</script>

</body>
</html>

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

  1. เรากำลังแนบคำสั่งเหตุการณ์ ng-click เข้ากับองค์ประกอบปุ่ม ที่นี่เรากำลังอ้างอิงฟังก์ชันที่เรียกว่า ShowHide ซึ่งกำหนดไว้ในคอนโทรลเลอร์ของเรา - DemoController
  2. เรากำลังแนบแอตทริบิวต์ ng-hide เข้ากับแท็ก div ซึ่งมีข้อความ Angular นี่คือแท็ก ซึ่งเราจะใช้เพื่อแสดงซ่อนใน Angular ตามแอตทริบิวต์ ng-show
  3. ในตัวควบคุม เรากำลังแนบตัวแปรสมาชิก isVisible เข้ากับอ็อบเจ็กต์ขอบเขต แอตทริบิวต์นี้จะถูกส่งไปยังแอตทริบิวต์เชิงมุม ng-show เพื่อควบคุมการมองเห็นของตัวควบคุม div ในเบื้องต้น เราจะตั้งค่านี้เป็น false เพื่อให้แท็ก div จะถูกซ่อนเมื่อแสดงหน้าเป็นครั้งแรก
  4. เรากำลังเพิ่มโค้ดให้กับฟังก์ชัน ShowHide ซึ่งจะตั้งค่าตัวแปรสมาชิก IsVisible ให้เป็นจริง เพื่อให้สามารถแสดงแท็ก div แก่ผู้ใช้ได้

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

Output:

คำสั่ง ng-hide ใน AngularJS

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

  • ในตอนแรก คุณจะเห็นว่าแท็ก div ซึ่งมีข้อความ “AngularJs” ปรากฏขึ้นตั้งแต่แรก เนื่องจากค่าคุณสมบัติของ false ถูกส่งไปยังคำสั่ง ng-hide
  • เมื่อเราคลิกที่ปุ่ม "Hide Angular" ค่าคุณสมบัติของ true จะถูกส่งไปยังคำสั่ง ng-hide ดังนั้นผลลัพธ์ด้านล่างจะแสดงขึ้นมา โดยคำว่า "Angular" จะถูกซ่อนไว้

คำสั่ง ng-hide ใน AngularJS

คำสั่ง Listener เหตุการณ์ AngularJS

คุณสามารถเพิ่มผู้ฟังเหตุการณ์ AngularJS ให้กับองค์ประกอบ HTML ของคุณได้โดยใช้อย่างน้อย 1 รายการ สั่ง:

  • ng-เบลอ
  • ng-เปลี่ยน
  • ng-คลิก
  • ng-คัดลอก
  • ng-ตัด
  • ng-dblคลิก
  • ng-โฟกัส
  • ng-keydown
  • NG-ปุ่มกด
  • ng-keyup
  • ng-mousedown
  • ng-mouseenter
  • ng-mouseave
  • ng-mousemove
  • ng-เมาส์โอเวอร์
  • ng-เมาส์อัพ
  • ng-วาง

สรุป

  • คำสั่งเหตุการณ์ใช้ใน Angular เพื่อเพิ่มโค้ดที่กำหนดเองเพื่อตอบสนองต่อเหตุการณ์ที่สร้างขึ้นโดยการแทรกแซงของผู้ใช้ เช่น การคลิกปุ่ม การคลิกแป้นพิมพ์และเมาส์ เป็นต้น
  • คำสั่งเหตุการณ์ที่พบบ่อยที่สุดคือคำสั่ง AngularJS ng-click ซึ่งใช้เพื่อจัดการเหตุการณ์การคลิก การใช้งานที่พบบ่อยที่สุดคือสำหรับการคลิกปุ่ม AngluarJS โดยที่สามารถเพิ่มโค้ดเพื่อตอบสนองต่อการคลิกปุ่มได้
  • องค์ประกอบ HTML ยังสามารถซ่อนหรือแสดงให้ผู้ใช้เห็นได้โดยใช้ คำสั่ง AngularJS ng-show, Angular ng-hide Directive และแอตทริบิวต์ ng-visible