Angularjs html dom
AngularJS ให้คำแนะนำในการผูกข้อมูลแอปพลิเคชันสำหรับคุณสมบัติขององค์ประกอบ HTML DOM
คำสั่ง ng-disabled
คำสั่ง NG-Disabled เชื่อมโยงข้อมูลแอปพลิเคชันโดยตรงกับแอตทริบิวต์ปิดใช้งานของ HTML
อินสแตนซ์ Angularjs
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" ng-init = "myswitch = true"> <p> <ปุ่ม ng-disabled = "myswitch"> คลิกฉัน! </button> </p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> {{myswitch}} </p>เอฟเฟกต์การทำงาน:
ปุ่ม
จริง
ตัวอย่างคำอธิบาย:
คำสั่ง NG-disabled เชื่อมโยงข้อมูลแอปพลิเคชัน "MySwitch" กับคุณสมบัติปิดใช้งานของ HTML
NG-Model Directive เชื่อมโยง "MySwitch" กับเนื้อหา (ค่า) ขององค์ประกอบช่องทำเครื่องหมายอินพุต HTML
หาก myswitch เป็นจริงปุ่มจะไม่สามารถใช้ได้:
<p> <ปุ่มปิดใช้งาน> คลิกฉัน! </button> </p>
หาก myswitch เป็นเท็จปุ่มจะใช้ได้:
<p> <button> คลิกฉัน! </button> </p>
คำสั่ง ng-show
คำสั่ง NG-show ซ่อนหรือแสดงองค์ประกอบ HTML
อินสแตนซ์ Angularjs
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </p> <p ng-show = "false"> ฉันมองไม่เห็น </p> </div> </body> </html>
เอฟเฟกต์การทำงาน:
ฉันมองเห็นได้
องค์ประกอบ NG-Show Directive (ซ่อน) องค์ประกอบ HTML ขึ้นอยู่กับค่าของค่า
คุณสามารถใช้นิพจน์เพื่อคำนวณค่าบูลีน (จริงหรือเท็จ):
อินสแตนซ์ Angularjs
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" ng-show = "ชั่วโมง> 12"> ฉันมองเห็นได้ </p> </div> </body> </html>
ผลการทำงาน:
ฉันมองเห็นได้
หมายเหตุในบทต่อไปเราจะให้ตัวอย่างเพิ่มเติมเกี่ยวกับการซ่อนองค์ประกอบ HTML โดยคลิกที่ปุ่ม
คำสั่ง ng-hide
คำสั่ง ng-hide ใช้เพื่อซ่อนหรือแสดงองค์ประกอบ HTML
อินสแตนซ์ Angularjs
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" ล่องหน. </p> <p ng-hid = "false"> ฉันมองเห็นได้ </p> </div> </body> </html>
ผลการทำงาน:
ฉันมองเห็นได้
ด้านบนเป็นการรวบรวมวัสดุ AngularJS HTML DOM เราจะเพิ่มพวกเขาต่อไปในภายหลัง ฉันหวังว่าเพื่อนที่สามารถช่วยโปรแกรม AngularJS