AngularJS HTML DOM

AngularJS สามารถสร้าง คำสั่ง ภายใน HTML DOM (หรือ Tag HTML) ได้ ซึ่งจะอธิบายในบทความนี้

• ng-disabled ทำงานเช่นเดียวกับ attribute disabled ใน Element ต่างๆของ HTML เช่น button, input , checkbox

ตัวอย่าง

<div ng-app="" ng-init="myControl=true">  

  <p>   <input type="text" ng-disabled="myControl">   

  <button ng-disabled="myControl">Submit</button>  

  </p>  

  <p>   <input type="checkbox" ng-model="myControl"/>Accept  </p>

</div> 

อธิบายว่า มีการกำหนดค่าเริ่มต้นให้กับ myControl ที่เป็นตัวแปรเริ่มต้นของ <div> ซึ่งค่าที่กำหนดเป็น true จากนั้นนำไปกำหนดให้กับ ng-disabled ซึ่งหากเป็น true จะเป็นการใช้ disabled ถ้า false คือ enabled

จะสังเกตุว่ามีการใช้ ng-model ใน checkbox แสดงว่ามีการดึงค่าจาก checkbox ทีเป็น boolean ส่งไปยังตัวแปร myControl ดังนั้น หาก checkbox ถูกเลือก myControl จะมีค่าเป็น true โดย checkbox จะถูกเลือกเป็น default อยู่แล้ว เพราะ myControl ถูกกำหนดค่าเริ่มต้นเป็น true ดังนั้นหากเราติ๊ก checkbox ออก จำทำให้ myControl มีค่าเป็น false นั่นคือ button และ textbox จะถูก Enabled

• ng-show/ng-hide เป็นการซ่อนหรือแสดง Element นั้นๆ 

ตัวอย่าง

<div ng-app="" ng-init="checking=true"> 

 <p ng-show="checking">I am visible.</p>   

 <input type="checkbox" ng-model="checking">visible

</div> 

อธิบายว่า เมื่อทำการติ๊ก checkbox ออก ข้อความจะถูกซ่อน เพราะ ng-show เริ่มแรกมีค่าเป็น true นั่นคือ ข้อความจะถูกแสดงในตอนแรก

นอกจากนี้ ยังสามารถกำหนดเงื่อนไขในการใช้ ng-show/ng-hide ได้ด้วย ดังตัวอย่างด้านล่าง

ตัวอย่าง

<div ng-app="">

<input type="text" ng-model="num">

<p>Show text if number > 9 </p>

<p ng-hide="num > 9">Hello World!!</p>
<p ng-show="num > 9">Your number is {{ num }} </p>
</div> 


อธิบายว่า หากค่าที่ป้อนใน Textbox มากกว่า 9 จะซ่อนข้อความ "Hello World!!" และจะแสดงข้อความ "Your number is เลขที่ป้อน" แต่ถ้าป้อนตัวเลขน้อยกว่า 9 จะแสดงข้อความ "Hello World!!" แทน