tutorial pengembangan web terbaru
 

AngularJS Bentuk


Bentuk di AngularJS menyediakan data-mengikat dan validasi kontrol input.


Kontrol masukan

kontrol masukan adalah elemen masukan HTML:

  • elemen masukan
  • pilih elemen
  • elemen tombol
  • elemen textarea

Data-Binding

Masukan kontrol menyediakan data-mengikat dengan menggunakan ng-model direktif.

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

Aplikasi ini sekarang memiliki properti bernama firstname .

The ng-model direktif mengikat input controller untuk sisa aplikasi Anda.

Properti firstname , dapat disebut di controller:

Contoh

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

Hal ini juga dapat disebut tempat lain dalam aplikasi:

Contoh

<form>
First Name: <input type="text" ng-model="firstname">
</form>

<h1>You entered: {{firstname}}</h1>
Cobalah sendiri "

kotak centang

Sebuah kotak centang memiliki nilai true atau false . Terapkan ng-model direktif untuk kotak centang, dan menggunakan nilai itu dalam aplikasi Anda.

Contoh

Tampilkan header jika kotak centang dicentang:

 <form>
    Check to show a header:
    <input type="checkbox" ng-model="myVar">
</form>

<h1 ng-show="myVar">My Header</h1>
Cobalah sendiri "

radiobuttons

Tombol radio mengikat aplikasi Anda dengan ng-model direktif.

Tombol radio dengan sama ng-model dapat memiliki nilai yang berbeda, tetapi hanya satu yang dipilih akan digunakan.

Contoh

Menampilkan beberapa teks, berdasarkan nilai dari tombol radio yang dipilih:

 <form>
Pick a topic:
<input type="radio" ng-model="myVar" value="dogs">Dogs
<input type="radio" ng-model="myVar" value="tuts">Tutorials
<input type="radio" ng-model="myVar" value="cars">Cars
</form>
Cobalah sendiri "

Nilai myVar akan baik dogs , tuts , atau cars .


Selectbox

Mengikat pilih kotak untuk aplikasi Anda dengan ng-model direktif.

Properti didefinisikan dalam ng-model atribut akan memiliki nilai opsi yang dipilih di selectbox tersebut.

Contoh

Menampilkan beberapa teks, berdasarkan nilai dari opsi yang dipilih:

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

Nilai myVar akan baik dogs , tuts , atau cars .


Formulir Contoh AngularJS

Nama depan:

Nama keluarga:


Formulir = {{user}}

Master = {{Master}}


aplikasi Kode

<div ng-app="myApp" ng-controller="formCtrl">
  <form novalidate>
    First Name:<br>
    <input type="text" ng-model="user.firstName"><br>
    Last Name:<br>
    <input type="text" ng-model="user.lastName">
    <br><br>
    <button ng-click="reset()">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: "John", lastName: "Doe"};
    $scope.reset = function() {
        $scope.user = angular.copy($scope.master);
    };
    $scope.reset();
});
</script>
Cobalah sendiri "
Catatan Atribut novalidate baru di HTML5. Menonaktifkan setiap validasi browser default.

misalnya Dijelaskan

The ng-aplikasi direktif mendefinisikan aplikasi AngularJS.

The ng-controller direktif mendefinisikan controller aplikasi.

The ng model direktif mengikat dua elemen input ke objek pengguna dalam model.

The formCtrl kontroler menetapkan nilai awal ke objek utama, dan mendefinisikan metode reset ().

Reset () metode menetapkan objek pengguna sama dengan objek utama.

The ng-klik direktif memanggil metode reset (), hanya jika tombol diklik.

Atribut novalidate tidak diperlukan untuk aplikasi ini, tetapi biasanya Anda akan menggunakannya dalam bentuk AngularJS, untuk menimpa standar validasi HTML5.