AngularJS ฟอร์ม

ฟอร์มใน AngularJS ให้การเชื่อมโยงข้อมูลและการตรวจสอบปุ่มนับตัว。

ปุ่มนับตัว

ปุ่มนับตัวเป็นองค์ประกอบ HTML อย่างนี้:

• องค์ประกอบ input
• องค์ประกอบ select
• องค์ประกอบ button
• องค์ประกอบ textarea

การเชื่อมโยงข้อมูล

ของปุ่มนับตัว คำสั่งกำหนดควบคุมแอปพลิเคชัน คำสั่งจะให้การโปรแกรมข้อมูลที่เชื่อมโยงข้อมูล。

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

โปรแกรมมี firstname ของแฟรม์

คำสั่งกำหนดควบคุมแอปพลิเคชัน คำสั่งจะมองตัวเลือกควบคุมเข้ากับส่วนที่เหลือของโปรแกรม。

แฟรม์ firstnameซึ่งสามารถอ้างอิงได้ในคอนโทรลเลอร์:

ตัวอย่าง

<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
  $scope.firstname = "Bill";
$scope.reset();
});

</script>

มันยังสามารถอ้างอิงได้ที่ส่วนอื่นของโปรแกรม:

ตัวอย่าง

<form>
  ชื่อ: <input type="text" ng-model="firstname">
</form>
<h1>คุณพิมพ์คือ：{{firstname}}</h1>

</script>

ปุ่มตรวจเช็ค

ค่าปุ่มตรวจเช็คเป็น true หรือ falseเพื่อ คำสั่งกำหนดควบคุมแอปพลิเคชัน คำสั่งนี้ถูกนำไปใช้กับปุ่มตรวจเช็ค และใช้ค่าของมันในโปรแกรมของคุณ。

ตัวอย่าง

หากเลือกปุ่มตรวจเช็ค จะแสดงหัวข้อ:

<form>
  เลือกเพื่อแสดงหัวข้อ:
  <input type="checkbox" ng-model="myVar">
</form>
<h1 ng-show="myVar">หัวข้อของฉัน</h1>

</script>

ปุ่มเลือกตัวเลือก

ใช้ คำสั่งกำหนดควบคุมแอปพลิเคชัน คำสั่งจะบอกที่ปุ่มเลือกตัวเลือกถึงโปรแกรมของคุณ。

ที่มี คำสั่งกำหนดควบคุมแอปพลิเคชัน ตัวเลือกสามารถมีค่าต่างกัน แต่จะใช้ค่าที่เลือกเท่านั้น。

ตัวอย่าง

แสดงข้อความบางอย่างตามค่าที่เลือกจากปุ่มเลือกตัวเลือก:

<form>
  เลือกประเภท:
  <input type="radio" ng-model="myVar" value="dogs">สุนัข
  <input type="radio" ng-model="myVar" value="tuts">บทความตำรา
  <input type="radio" ng-model="myVar" value="cars">รถยนต์
</form>

</script>

ค่าของ myVar จะเป็น dogs、tuts หรือ cars。

ตัวเลือกลง

ใช้ คำสั่งกำหนดควบคุมแอปพลิเคชัน ของออกแบบจะมองเห็นตัวเลือกลงในโปรแกรมของคุณ

คำสั่งกำหนดควบคุมแอปพลิเคชัน คุณสมบัติที่ถูกกำหนดในแนวทางจะมีค่าที่เลือกในตัวเลือก

ตัวอย่าง

แสดงข้อความบางอย่างตามค่าที่เลือกของตัวเลือก

<form>
  เลือกหัวข้อ:
  <select ng-model="myVar">
    <option value="">
    <option value="dogs">Dogs
    <option value="tuts">Tutorials
    <option value="cars">Cars
  </select>
</form>

</script>

ค่าของ myVar จะเป็น dogs、tuts หรือ cars。

AngularJS ฟอร์มตัวอย่าง

应用程序代码

<div ng-app="myApp" ng-controller="formCtrl">
  <form novalidate>
    名字：<br>
    <input type="text" ng-model="user.firstName"><br>
    姓氏：<br>
    <input type="text" ng-model="user.lastName">
    <br><br>
    <button ng-click="reset()">重置</button>
  </form>
  <p>form = {{user}}</p>
  <p>master = {{master}}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
  $scope.master = {firstName: "Bill", lastName: "Gates"};
  $scope.reset = function() {
    $scope.user = angular.copy($scope.master);
  ;
  $scope.reset();
$scope.reset();
});

</script>

ลองทดลองด้วยตัวเอง novalidate

ตัวแปรเป็นตัวแปรใหม่ใน HTML5 มันหยุดการตรวจสอบเบราเซอร์โดยแบบฉบับ

Example Explained ng-app

คำสั่งกำหนดแอปพลิเคชัน AngularJS ng-controller

คำสั่งกำหนดควบคุมแอปพลิเคชัน ng-model

คำสั่งจะแบ่งย่อยสององค์ประกอบฝากเข้าไปในโมเดล user formCtrl master ควบคุมเป็น reset() วิธี

reset() วิธีการตั้งค่าตัวแปรให้มีค่าเริ่มต้น และกำหนด user การตั้งค่าตัวแปรเป็นเท่ากับ master องค์ประกอบ

ng-click คำสั่งให้สำหรับงานที่เรียกคำสั่งสำหรับสัญญาณที่กดทับปุ่ม reset() วิธี

แอปพลิเคชันนี้ไม่จำเป็นต้องใช้ตัวแปร novalidate แต่โดยทั่วไปแล้วคุณจะใช้มันในฟอร์ม AngularJS เพื่อปิดการตรวจสอบทางเบราเซอร์แบบมาตรฐาน HTML5