เหตุการณ์ AngularJS
AngularJS มีคำสั่งเหตุการณ์ HTML ของตัวเอง
คำสั่ง ng-click
คำสั่ง NG-click กำหนดเหตุการณ์การคลิก AngularJS
อินสแตนซ์ 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-controller = "myctrl"> <button ng-click = "count = count + 1"> คลิกฉัน! </button> <p> {{count}} </p> </div> <script> var app = angular.module ('myapp', []); app.controller ('myctrl', ฟังก์ชั่น ($ scope) {$ scope.count = 0;});เอฟเฟกต์การทำงาน:
0
ซ่อนองค์ประกอบ HTML
คำสั่ง ng-hide ใช้เพื่อตั้งค่าว่าส่วนแอปพลิเคชันสามารถมองเห็นได้หรือไม่
ng-hide = "true" ตั้งค่าว่าองค์ประกอบ HTML นั้นมองไม่เห็น
ng-hide = "false" ตั้งค่าองค์ประกอบ 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-controller = "personctrl"> <button ng-click = "toggle ()"> ซ่อน/แสดง </button> <p ng-hide = "myVar"> ชื่อ: <อินพุตประเภท = ข้อความ ng-model = "firstName"> <br> ชื่อ: <อินพุตประเภท = ข้อความ ng-model = "สุดท้าย" LastName}} </p> </div> <script> var app = angular.module ('myapp', []); app.controller ('personctrl', ฟังก์ชั่น ($ scope) {$ scope.firstname = "John"; $ scope.lastname = "doe" $ scope.myvar =! $ scope.myvar;ผลการทำงาน:
ชื่อ:
นามสกุล:
ชื่อ: John Doe
การวิเคราะห์แอปพลิเคชัน:
ส่วนแรกของ PersonController นั้นคล้ายกับบทคอนโทรลเลอร์
แอปพลิเคชันมีคุณสมบัติเริ่มต้น: $ scope.myvar = false;
คำสั่ง ng-hide ตั้งค่าว่าองค์ประกอบ <p> และฟิลด์อินพุตทั้งสองสามารถมองเห็นได้และตั้งค่าว่าจะมองเห็นได้ตามค่าของ myVAR (จริงหรือเท็จ)
ฟังก์ชั่น Toggle () ใช้เพื่อสลับค่าของตัวแปร myVAR (จริงและเท็จ)
ng-hide = "true" ทำให้องค์ประกอบมองไม่เห็น
แสดงองค์ประกอบ HTML
คำสั่ง NG-show สามารถใช้เพื่อตั้งค่าว่าส่วนหนึ่งของแอปพลิเคชันสามารถมองเห็นได้หรือไม่
ng-show = "false" สามารถตั้งค่าองค์ประกอบ HTML ที่มองไม่เห็น
ng-show = "true" สามารถตั้งค่าให้มองเห็นองค์ประกอบ HTML
ตัวอย่างต่อไปนี้ใช้คำสั่ง NG-Show:
อินสแตนซ์ 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-controller = "personctrl"> <button ng-click = "toggle ()"> ซ่อน/แสดง </button> <p ng-show = "myVar"> ชื่อ: <อินพุตประเภท = ข้อความ ng-model = "person.firstname"> <br> ชื่อ: "" + person.lastname}} </p> </div> </script> var app = angular.module ('myapp', []); app.controller ('personctrl', ฟังก์ชั่น ($ scope) {$ scope.person = {firstName: "John", LastName: "doe"}; $ scope.myvar =! $ scope.myvar;ผลการทำงาน:
ชื่อ:
นามสกุล:
ชื่อ: John Doe
ข้างต้นเป็นการรวบรวมข้อมูลเหตุการณ์ AngularJS เราจะเพิ่มในภายหลัง สำหรับการอ้างอิงโดยเพื่อนที่ต้องการ