การใช้ Directives ใน AngularJS

Directives ใน AngularJS คือ Attribute ที่เพิ่มเข้าไปใน Tag ของ HTML โดยส่วนใหญ่มักขึ้นต้นด้ว ng-* เสมอ ในบทความก่อนหน้านั้น เรื่อง AngularJS คืออะไร ได้กล่าวถึง Directives ไปบ้างแล้วหลายตัว เช่น
1. ng-app directive
...
2. ng-model directive
Enter your Name: 
3. ng-bind directive
Hello 
นอกจาก Directives ดังกล่าวแล้วยังมี Directives อื่นที่น่าสนใจเหมือนกันครับ คิดว่าต้องได้ใช้บ่อยเหมือนกันงั้นเราลองมาดูตัวอยย่างอื่นๆกันครับ
4. ng-init directive  เป็นการกำหนดตัวแปร พร้อมกำหนดค่าให้กับตัวแปรด้วย
...

5. ng-repeat directive  ใช้สำหรับวนลูปข้อมูลในลักษณะ each
... List of Countries with locale:
  1. {{ 'Country: ' + country.name + ', Locale: ' + country.locale }}

ตัวอย่างการใช้งานเบื้องต้น

Sample Application

Enter your Name: Hello ! List of Countries with locale:
  1. {{ 'Country: ' + country.name + ', Locale: ' + country.locale }}

ผลลัพธ์

นอกจาก Directives ดังกล่าวข้างต้นยังมี Directives อีกมาก เช่น Directives เหล่านี้ ngBindHtml , ngBindTemplate , ngBlur , ngChange , ngChecked , ngClass , ngClassEven , ngClassOdd , ngClick , ngCloak , ngController , ngCopy , ngCsp , ngCut , ngDblclick , ngDisabled , ngFocus , ngForm , ngHide , ngHref , ngIf , ngInclude , ngJq , ngKeydown , ngKeypress , ngKeyup , ngList , ngModel , ngModelOptions , ngMousedown , ngMouseenter , ngMouseleave , ngMousemove , ngMouseover , ngMouseup , ngNonBindable , ngOpen , ngOptions , ngPaste , ngPluralize , ngReadonly , ngSelected , ngShow , ngSrc , ngSrcset , ngStyle , ngSubmit , ngSwitch , ngTransclude , ngValue, อื่นๆ…

About Nop

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.
    Blogger Comment

0 comments:

Post a Comment