คำสั่งต่อไปนี้สามารถใช้สำหรับการเชื่อมโยงข้อมูลแอปพลิเคชันกับคุณสมบัติขององค์ประกอบ HTML DOM
| S.No. | ชื่อ | อธิบาย |
|---|---|---|
| 1 | ng-disabled | ปิดใช้งานการควบคุมที่กำหนด |
| 2 | ng-show | แสดงการควบคุมที่กำหนด |
| 3 | ng-hide | ซ่อนในการควบคุมที่กำหนด |
| 4 | คลิกที่ | ระบุเหตุการณ์ angularjs คลิก |
คำสั่ง ng-disabled
เพิ่มคุณสมบัติ NG-disabled ลงในปุ่ม HTML ผ่านรุ่นของมัน โมเดลถูกผูกไว้กับช่องทำเครื่องหมายเพื่อดูการเปลี่ยนแปลงต่อไปนี้
<อินพุต type = "ช่องทำเครื่องหมาย" ng-model = "enabledisableButton"> ปิดใช้งานปุ่ม <ปุ่ม ng-disabled = "enabledisableButton"> คลิกฉัน!
คำสั่ง ng-show
เพิ่มคุณสมบัติ NG-Show ลงในปุ่ม HTML และส่งต่อไปยังรุ่น ผูกโมเดลเข้ากับช่องทำเครื่องหมายและดูการเปลี่ยนแปลงต่อไปนี้
<อินพุต type = "ช่องทำเครื่องหมาย" ng-model = "showhide1"> show button <button ng-show = "showhide1"> คลิกฉัน! </button>
คำสั่ง ng-hide
เพิ่มแอตทริบิวต์ NG-hide เป็นปุ่ม HTML ผ่านรุ่นของมัน ผูกโมเดลเข้ากับช่องทำเครื่องหมายและดูการเปลี่ยนแปลงต่อไปนี้
<อินพุต type = "ช่องทำเครื่องหมาย" ng-model = "showhide2"> ซ่อนปุ่ม <ปุ่ม ng-hide = "showhide2"> คลิกฉัน!
คำสั่ง ng-click
เพิ่มแอตทริบิวต์ NG-click เป็นปุ่ม HTML และอัปเดตรุ่น แบบจำลองการเชื่อมโยง HTML เพื่อดูการเปลี่ยนแปลงในการรวมกัน
<p> ทั้งหมดคลิก: {{clickcounter}} </p> </td> <ปุ่ม ng-click = "clickcounter = clickcound + 1"> คลิกฉัน!ตัวอย่าง
ตัวอย่างต่อไปนี้จะแสดงคำแนะนำทั้งหมดข้างต้น
testangularjs.html
<Html> <head> <title> AngularJS HTML DOM </title> </head> <body> <h2> แอปพลิเคชันตัวอย่าง AngularJs </h2> <div ng-app = ""> <table> <tr> <td> <type = "ช่องทำเครื่องหมาย" ng-model = "enablebutton" ng-disabled = "enabledisableButton"> คลิกฉัน! </button> </td> </tr> <tr> <td> <อินพุตประเภท = "ช่องทำเครื่องหมาย" ng-model = "showhide1"> ปุ่มแสดง </td> <td> <button ng-show = "showhide1"> คลิกฉัน! ng-model = "showhide2"> ปุ่มซ่อน </td> <td> <ปุ่ม ng-hide = "showhide2"> คลิกฉัน! </button> </td> </tr> <tr> <td> <p> คลิกทั้งหมด: {{clickcounter}} ฉัน! </ปุ่ม> </td> </tr> </table> </div> <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"> </script> </body>เอาท์พุท
เปิด textangularjs.html ในเว็บเบราว์เซอร์และดูผลลัพธ์ต่อไปนี้:
ด้านบนเป็นการรวบรวมวัสดุ AngularJS HTML DOM เราจะยังคงเพิ่มข้อมูลที่เกี่ยวข้องในอนาคต ขอบคุณสำหรับการสนับสนุนเว็บไซต์นี้!