ng-init
สำหรับการกำหนดค่าเริ่มต้นให้กับตัวแปร1 2 3 4 5 6 7 | <div ng-init="price=50;qty=25"> <p>Amount: {{ price * qty }}</p> <p>Amount: {{ price * qty | currency }}</p> <p>Amount: {{ price * qty | currency:'THB' }}</p> </div> |
ตัวอย่างจะเป็นการกำหนดค่าตัวแปร price กับ qty
ng-model
เป็นการผูกค่าตัวแปรกับ input tag ใน HTML
1 2 | <input type="text" ng-model="name"> <p>Name: {{ name }}</p> |
ในตัวอย่างเป็นการผูก input text กับตัวแปรชื่อ name ซึ่งในการผูกค่า อาจจะใช้เป็นตัวแปรแบบ primitive หรือว่า object ก็ได้
หรืออีกตัวอย่างหนึ่ง เป็นการผูกค่าตัวแปร like กับ input radio
1 2 3 4 5 | <div ng-init="like='Yes'"> <input type="radio" value="Yes" ng-model="like">I like <input type="radio" value="No" ng-model="like">I don't like <p>Answer: {{ like }}</p> </div> |
หรือ ผูกค่ากับ select tag
1 2 3 4 5 6 7 | <select ng-model="food"> <option value="Rice">Rice</option> <option value="Noodle">Noodle</option> <option value="Soup">Soup</option> </select> Your Order: {{ food }} |
ng-click
เนื่องจากใน javascript ตัวแปรนอกจากจะเก็บค่าต่างๆ หรือว่าใช้เก็บเป็น object ของ property (ซึ่งก็เป็นการเก็บค่าอยู่ดี) ได้แล้ว ยังสามารถกำหนดให้ตัวแปรมีค่าเก็บ function ได้ด้วย เสมือนกับ function เป็นค่าๆ หนึ่ง ดังนั้นเราจึงใช้คุณสมบัตินี้มากำหนดพฤติกรรมของการทำงานในเอกสาร HTML ได้ตัวอย่างกำหนดการคำนวณให้กับปุ่ม
1 2 | <button ng-click="counter=counter+1">Count</button> <p>Counter: {{ counter }}</p> |
ng-if
เป็น directive ที่ใช้กำหนดเงื่อนใขให้กับ HTMLตัวอย่างกำหนดให้แสดงหรือไม่แสดงข้อความ (รวมถึงสีพื้น)
1 2 3 4 5 6 | <div ng-init="show=true"> <p ng-if="show" style="background-color: red;">Red</p> <p ng-if="!show" style="background-color: green;">Green</p> <button ng-click="show=!show">Toggle</button> </div> |
นอกจากนี้ยังมี
- ng-repeat
- ng-app
- ng-controller
พื้นฐานของ Angular Directive ก็จะมีประมาณนี้ เอาไว้ค่อยมาต่อกันนะค่ะ
Reference:
ng Directive
