คำสั่ง AngularJS ng-click, ng-show & ng-hide

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

⚡ สรุปอย่างชาญฉลาด

AngularJS Events ช่วยให้เว็บแอปพลิเคชันตอบสนองต่อการป้อนข้อมูลของผู้ใช้ เช่น การคลิกเมาส์ การกดปุ่ม และการวางเมาส์เหนือองค์ประกอบ คำสั่งต่างๆ เช่น ng-click, ng-show และ ng-hide จะผูกพฤติกรรมเหล่านั้นไว้ในมาร์กอัปโดยตรง แทนที่จะใช้ตัวรับฟังเหตุการณ์ DOM แบบกำหนดเอง

  • 🖱️ การจัดการการคลิก: ng-click ใช้สำหรับแนบนิพจน์หรือฟังก์ชันควบคุมเข้ากับองค์ประกอบ ซึ่งโดยทั่วไปแล้วจะเป็นปุ่ม
  • 🇧🇷 การแสดงผลแบบมีเงื่อนไข: ng-show จะแสดงองค์ประกอบเมื่อเงื่อนไขเป็นจริง ในขณะที่ ng-hide จะลบองค์ประกอบนั้นออกเมื่อเงื่อนไขเป็นจริง
  • 🎨 กลไก: คำสั่งทั้งสองจะสลับคลาส CSS ng-hide ที่มีอยู่แล้ว ซึ่งจะตั้งค่า display เป็น none เพื่อให้องค์ประกอบยังคงอยู่ใน DOM
  • 🔗 การผูกขอบเขต: ตัวแปรสมาชิกที่อยู่ใน $scope จะควบคุมการมองเห็น และการเปลี่ยนแปลงค่าภายในฟังก์ชันจัดการเหตุการณ์จะอัปเดตมุมมองทันที
  • 📋 ขอบเขตคำสั่ง: คำสั่งสำหรับผู้ฟังจำนวน 18 คำสั่ง ครอบคลุมเหตุการณ์ต่างๆ เช่น การเบลอ การเปลี่ยนแปลง การโฟกัส แป้นพิมพ์ เมาส์ การวาง และการส่งข้อมูล
  • ⚠️ สถานะการสนับสนุน: AngularJS สิ้นสุดการสนับสนุนเมื่อวันที่ 31 ธันวาคม 2021 ดังนั้นโครงการใหม่ควรเลือกใช้ Angular เวอร์ชันใหม่กว่าแทน
อ่านเพิ่มเติม

AngularJS ng-คลิก ng-show ng-hide คำสั่ง

เหตุการณ์ AngularJS

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

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

ตัวอย่างเช่น หากปุ่มบนหน้าเว็บควรประมวลผลบางอย่างเมื่อถูกคลิก คำสั่งเหตุการณ์ ng-click จะเป็นตัวเชื่อม (hook) สำหรับการประมวลผลนั้น

⚠️ ประกาศเกี่ยวกับการสนับสนุน: AngularJS มาถึงแล้ว สิ้นสุดชีวิตเมื่อวันที่ 31 ธันวาคม 2021 และจะไม่ได้รับการแก้ไขข้อบกพร่องหรือการแก้ไขด้านความปลอดภัยเพิ่มเติมจากทีม Angular อีกต่อไป คำแนะนำด้านล่างนี้ยังคงถูกต้องสำหรับการบำรุงรักษาแอปพลิเคชัน AngularJS 1.x ที่มีอยู่ สำหรับงานใหม่ ให้ใช้เวอร์ชันที่ทันสมัยกว่า เชิงมุมโดยที่คำสั่งเหล่านี้จะถูกแทนที่ด้วยการผูกเหตุการณ์ เช่น (click) และโดย *ngIf.

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

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

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

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

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

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

ng คลิกคำสั่งใน AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body ng-app="">

<script src="https://code.angularjs.org/1.8.3/angular.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>

Code คำอธิบาย:

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

Output:

ng คลิกใน AngularJS

ปุ่มเพิ่มค่าจะปรากฏขึ้น โดยค่าเริ่มต้นจะเป็นศูนย์ การคลิกปุ่มนี้จะเพิ่มค่าขึ้นทีละหนึ่ง ดังแสดงในภาพด้านล่าง

ng คลิกใน AngularJS

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

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

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

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

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

ตัวอย่างนี้ใช้ ng-show เพื่อแสดงองค์ประกอบที่ซ่อนอยู่

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.8.3/angular.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>

Code คำอธิบาย:

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

Output:

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

div ที่บรรจุข้อความจะไม่แสดงให้เห็นในตอนแรก เนื่องจาก IsVisible เริ่มต้นเป็นเท็จ การคลิก แสดง Angular ตั้งค่าเป็นจริงแล้วข้อความจะปรากฏขึ้น

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

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

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

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

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

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

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

ตัวอย่างนี้เลียนแบบตัวอย่างของ ng-show เพื่อให้สามารถเปรียบเทียบคำสั่งทั้งสองได้โดยตรง

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.8.3/angular.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 = true;
        };
    });
</script>

</body>
</html>

Code คำอธิบาย:

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

Output:

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

div จะแสดงขึ้นมาในตอนแรกเนื่องจากมีการส่งค่า false ให้กับ ng-hide เมื่อคลิกแล้ว... ซ่อน Angular ผ่านการตรวจสอบแล้ว คำนั้นก็หายไป

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

ng-show กับ ng-hide กับ ng-if: ความแตกต่างที่สำคัญ

คำสั่งสามคำสั่งนี้ควบคุมว่าผู้ใช้จะเห็นองค์ประกอบหรือไม่ และการเลือกใช้คำสั่งใดคำสั่งหนึ่งจะส่งผลต่อทั้งพฤติกรรมและประสิทธิภาพการแสดงผล คำสั่งสองคำสั่งแรกจะสลับคลาส CSS เท่านั้น ดังนั้นองค์ประกอบนั้นจึงปรากฏอยู่ในหน้าเว็บเสมอ ส่วนคำสั่งที่สามจะเพิ่มและลบองค์ประกอบนั้นเอง

แง่มุม ng-แสดง ng-hide ง-อิฟ
องค์ประกอบที่มองเห็นได้เมื่อ คำพูดนั้นถูกต้อง นิพจน์นั้นเป็นเท็จ คำพูดนั้นถูกต้อง
องค์ประกอบใน DOM เสมอ เสมอ เฉพาะในขณะที่เป็นความจริงเท่านั้น
วิธีการที่ใช้ Togglคลาส .ng-hide Togglคลาส .ng-hide สร้างและทำลายองค์ประกอบ
ขอบเขตสำหรับเด็ก แบ่งปันขอบเขตหลัก แบ่งปันขอบเขตหลัก สร้างขอบเขตย่อยใหม่
ผู้เฝ้ามองเมื่อซ่อนตัว ยังคงใช้งานอยู่ ยังคงใช้งานอยู่ ลบออก
เหมาะสำหรับ การปรับเปลี่ยนเนื้อหาแสงบ่อยครั้ง สภาวะกลับด้าน เนื้อหาหนักๆ มักไม่ค่อยได้เห็นกันบ่อยนัก

ใช้ ng-show หรือ ng-hide เมื่อองค์ประกอบมีการเปลี่ยนแปลงบ่อยๆ เนื่องจากองค์ประกอบนั้นจะไม่ถูกสร้างขึ้นใหม่ และการเปลี่ยนแปลงนั้นใช้เพียงแค่การเปลี่ยนคลาสเท่านั้น ส่วนส่วนที่แสดงไม่บ่อยนักและมีค่าใช้จ่ายสูง ให้ใช้ ng-if เนื่องจากหากลบองค์ประกอบนั้นออก ก็จะลบตัวตรวจสอบ (watchers) ขององค์ประกอบนั้นออกไปด้วย และลดต้นทุนการประมวลผล (digest cost) ในแต่ละรอบ

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

คุณสามารถเพิ่มตัวรับฟังเหตุการณ์ AngularJS ให้กับองค์ประกอบ HTML โดยใช้วิธีการเหล่านี้อย่างน้อยหนึ่งวิธี สั่ง:

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

แต่ละคำสั่งจะรับนิพจน์ และเหตุการณ์ของเบราว์เซอร์แบบดิบๆ สามารถเข้าถึงได้ภายในนั้น $event เมื่อตัวจัดการต้องการรายละเอียด เช่น ปุ่มที่กด หรือพิกัดการคลิก

คำถามที่พบบ่อย

ผ่านช่องที่จองไว้ $event ตัวแปร เช่น ng-click="handle($event)"จากนั้นตัวควบคุมจะได้รับเหตุการณ์ดั้งเดิมและสามารถอ่านเป้าหมาย พิกัด หรือเรียกใช้ preventDefault ได้

ng-repeat สร้างขอบเขตย่อยสำหรับแต่ละรายการ ดังนั้นการกำหนดค่าพื้นฐานภายในตัวจัดการจะอัปเดตเฉพาะขอบเขตย่อยนั้นเท่านั้น ให้เขียนไปยังคุณสมบัติของอ็อบเจ็กต์ในขอบเขตหลัก หรือใช้ $parentเพื่อให้เห็นการเปลี่ยนแปลงจากภายนอกได้อย่างชัดเจน

บางส่วน AI เครื่องมือแปลง ng-click เป็น (click) และ ng-show ไปยัง *ngIf ทำงานได้อย่างน่าเชื่อถือ แต่ตรรกะที่ขึ้นอยู่กับขอบเขตและการผูกข้อมูลแบบสองทางจำเป็นต้องได้รับการตรวจสอบด้วยตนเอง เนื่องจากขอบเขตของ AngularJS ไม่มีสิ่งที่เทียบเท่าโดยตรงใน Angular

ผู้ช่วย AI สามารถระบุสาเหตุทั่วไปได้อย่างรวดเร็ว เช่น การขาด ng-app, ชื่อคอนโทรลเลอร์ที่ไม่ตรงกับการลงทะเบียนโมดูล หรือการพิมพ์ผิดในแอตทริบิวต์ของ directive วิธีแก้ไขที่แนะนำยังคงต้องทดสอบในเบราว์เซอร์ต่อไป

ไม่ครับ AngularJS มีแค่ ng-show, ng-hide และ ng-if เท่านั้น ไม่มี directive ng-visible และการอ้างอิงถึง directive ดังกล่าวจะไม่มีผลใดๆ เพราะ AngularJS จะไม่สนใจ attribute ที่ไม่รู้จักครับ

สรุปโพสต์นี้ด้วย: