AngularJS HTML HOME
AngularJS มีคำสั่งสำหรับเชื่อมโยงข้อมูลแอปพลิเคชันกับแอตทริบิวต์ขององค์ประกอบ HTML DOM
ng-disabled Directive
ng-disabled directive เชื่อมโยงข้อมูล แอปพลิเคชัน AngularJS กับแอตทริบิวต์ที่ถูกปิดใช้งานขององค์ประกอบ HTML
ตัวอย่าง AngularJS
<div ng-app="" ng-init="mySwitch=true">
<p>
<button ng-disabled="mySwitch">Click Me!</button>
</p>
<p>
<input type="checkbox" ng-model="mySwitch">Button
</p>
<p>
{{ mySwitch }}
</p>
</div>
แอปพลิเคชันอธิบาย:
ng-disabled directive ผูกข้อมูลแอปพลิเคชันmySwitch กับแอตทริบิวต์ ที่ ปิดใช้งานของปุ่ม HTML
คำ สั่ง ng-model ผูกค่าขององค์ประกอบช่องทำเครื่องหมาย HTML กับค่าของmySwitch
หากค่าของmySwitchประเมินเป็น trueปุ่มจะถูกปิดใช้งาน:
<p>
<button disabled>Click Me!</button>
</p>
หากค่าของmySwitchประเมินเป็น falseปุ่มจะไม่ถูกปิดใช้งาน:
<p>
<button>Click Me!</button>
</p>
ng-show Directive
ng-show directive แสดงหรือซ่อน องค์ประกอบHTML
ตัวอย่าง AngularJS
<div ng-app="">
<p ng-show="true">I am visible.</p>
<p ng-show="false">I am not visible.</p>
</div>
คำสั่ง ng-show แสดง (หรือซ่อน) องค์ประกอบ HTML ตาม ค่าของ ng-show
คุณสามารถใช้นิพจน์ใดๆ ที่ประเมินว่าเป็นจริงหรือเท็จได้:
ตัวอย่าง AngularJS
<div ng-app="" ng-init="hour=13">
<p ng-show="hour > 12">I am visible.</p>
</div>
ในบทต่อไป มีตัวอย่างเพิ่มเติมโดยใช้การคลิกปุ่มเพื่อซ่อนองค์ประกอบ HTML
ng-hide Directive
ng-hide directive ซ่อนหรือแสดง องค์ประกอบHTML
ตัวอย่าง AngularJS
<div ng-app="">
<p ng-hide="true">I am
not visible.</p>
<p ng-hide="false">I am visible.</p>
</div>