รูปแบบ Angularjs
รูปแบบ AngularJS เป็นชุดของการควบคุมอินพุต
การควบคุม HTML
องค์ประกอบอินพุต HTML ต่อไปนี้เรียกว่า HTML Controls:
องค์ประกอบอินพุต
เลือกองค์ประกอบ
องค์ประกอบปุ่ม
องค์ประกอบ textarea
รูปแบบ HTML
รูปแบบ HTML มักจะมีอยู่ในเวลาเดียวกันกับการควบคุม HTML
อินสแตนซ์ฟอร์ม AngularJs
ชื่อแรก:
นามสกุล:
Form = {"FirstName": "John", "LastName": "DOE"}
Master = {"FirstName": "John", "LastName": "DOE"}
รหัสแอปพลิเคชัน:
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" <ฟอร์ม novalidate> ชื่อแรก: <br> <อินพุต type = "text" ng-model = "user.firstname"> <br> นามสกุล: <br> <อินพุต type = "text" ng-model = "user.lastname"> <br> <br> <button ng-click = "รีเซ็ต () = {{master}} </p> </div> <pristr> var app = angular.module ('myapp', []); app.controller ('formctrl', ฟังก์ชั่น ($ scope) {$ scope.master = {firstName: "John", LastName: "doe"}; Angular.copy ($ scope.master);ผลการทำงาน:
ชื่อแรก:
นามสกุล:
Form = {"FirstName": "John", "LastName": "DOE"}
Master = {"FirstName": "John", "LastName": "DOE"}
หมายเหตุ: คุณสมบัติ Novalidate จะถูกเพิ่มเข้ามาใหม่ใน HTML5 ปิดใช้งานการตรวจสอบเริ่มต้นโดยใช้เบราว์เซอร์
การวิเคราะห์ตัวอย่าง
คำสั่ง NG-APP กำหนดแอปพลิเคชัน AngularJS
NG-Controller Directive กำหนดตัวควบคุมแอปพลิเคชัน
คำสั่ง NG-Model ผูกองค์ประกอบอินพุตสององค์ประกอบกับวัตถุผู้ใช้ของโมเดล
ฟังก์ชัน formCtrl ตั้งค่าเริ่มต้นของวัตถุต้นแบบและกำหนดวิธีการรีเซ็ต ()
วิธีการรีเซ็ต () ตั้งค่าวัตถุผู้ใช้เท่ากับวัตถุต้นแบบ
คำสั่ง ng-click เรียกใช้วิธีการรีเซ็ต () และเรียกว่าเมื่อคลิกปุ่ม
คุณสมบัติของ Novalidate ไม่จำเป็นในแอปพลิเคชัน แต่คุณต้องใช้มันในรูปแบบ AngularJS สำหรับการตรวจสอบความถูกต้อง HTML5 มาตรฐาน
ข้างต้นเป็นการรวบรวมวัสดุฟอร์ม AngularJS และเราจะเพิ่มพวกเขาในภายหลัง ฉันหวังว่านักเรียนที่สามารถช่วยในการเขียนโปรแกรม