Borang AngularJS

Borang AngularJS menyediakan pengikat data dan pengesahan kawalan input.

Kawalan input

Kawalan input adalah elemen input HTML:

• Elemen input
• Elemen select
• Elemen butang
• Elemen textarea

Pengikat data

Kawalan input melalui pengikat data ng-model Perintah menyediakan pengikat data.

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

Sekarang, aplikasi ini mempunyai nama firstname Properti.

ng-model Perintah akan memikat pengawal input ke bahagian lain dari aplikasi.

Properti firstnameBoleh diambil di pengawal:

实例

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

亲自试一试

Juga boleh diambil di tempat lain dalam aplikasi:

实例

<form>
  Nama: <input type="text" ng-model="firstname">
</form>
<h1>Anda mengisi adalah: {{firstname}}</h1>

亲自试一试

Kotak centang

Nilai kotak centang adalah true 或 falseTunjukkan ng-model Perintah digunakan untuk kotak centang, dan akan digunakan nilai dalam aplikasi anda.

实例

Jika dipilih kotak centang, tajuk akan dipaparkan:

<form>
  Pilih untuk tunjukkan tajuk:
  <input type="checkbox" ng-model="myVar">
</form>
<h1 ng-show="myVar">Tajuk saya</h1>

亲自试一试

Pilihan tunggal

使用 ng-model Perintah akan memikat pilihan tunggal ke aplikasi anda.

yang sama ng-model pilihan tunggal boleh mempunyai nilai berbeza, tetapi hanya akan digunakan nilai yang dipilih.

实例

Tunjukkan beberapa teks berdasarkan nilai pilihan tunggal yang dipilih:

<form>
  Pilih tajuk:
  <input type="radio" ng-model="myVar" value="dogs">Anjing
  <input type="radio" ng-model="myVar" value="tuts">Panduan
  <input type="radio" ng-model="myVar" value="cars">Kereta
</form>

亲自试一试

myVar的值将是 dogs、tuts 或 cars。

下拉选择框

使用 ng-model 指令将下拉选择框绑定到您的应用程序。

ng-model 属性中定义的属性将具有选择框中所选选项的值。

实例

根据选定的选项值显示一些文本：

<form>
  Select a topic:
  <select ng-model="myVar">
    <option value="">
    <option value="dogs">Dogs
    <option value="tuts">Tutorials
    <option value="cars">Cars
  </select>
</form>

亲自试一试

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();
});

亲自试一试

novalidate 属性是 HTML5 中的新属性。它禁用任何默认浏览器验证。

Paparan Diutarakkan

ng-app Arahan mendefinikan aplikasi AngularJS.

ng-controller Arahan mendefinikan kawalan aplikasi.

ng-model Arahan mengikat dua elemen input kepada objek user dalam model.

formCtrl Kawalan untuk master Objek diatur nilai asal, dan mengdefinikan reset() Kaedah.

reset() Kaedah akan user Objek diatur untuk sama dengan master Objek.

ng-click Arahan hanya dipanggil sewaktu klik butang reset() Kaedah.

Aplikasi ini tidak memerlukan atribut novalidate, tetapi biasanya anda akan gunakan ia dalam borang AngularJS untuk menutupi pengesahan standar HTML5.