The ng model direktif mengikat nilai kontrol HTML (input, pilih, textarea) untuk data aplikasi.
The ng model Directive
Dengan ng-model direktif Anda dapat mengikat nilai field input untuk variabel dibuat dalam AngularJS.
Contoh
<div ng-app="myApp" ng-controller="myCtrl">
Name:
<input ng-model="name">
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name
= "John Doe";
});
</script> Cobalah sendiri " Dua Way Binding
Mengikat berjalan dua arah. Jika pengguna mengubah nilai dalam field input, properti AngularJS juga akan mengubah nilai itu:
Contoh
<div ng-app="myApp" ng-controller="myCtrl">
Name:
<input ng-model="name">
<h1>You entered: {{name}}</h1>
</div>
Cobalah sendiri " Validasi User Input
The ng-model direktif dapat menyediakan jenis validasi untuk data aplikasi (nomor, e-mail, diperlukan):
Contoh
<form ng-app="" name="myForm">
Email:
<input type="email" name="myAddress" ng-model="text">
<span ng-show="myForm.myAddress.$error.email">Not a valid e-mail
address</span>
</form>
Cobalah sendiri " Dalam contoh di atas, rentang akan ditampilkan hanya jika ekspresi dalam ng-show atribut mengembalikan true .
 | Jika properti di ng-model atribut tidak ada, AngularJS akan membuat satu untuk Anda. |
|---|
Status aplikasi
The ng-model direktif dapat memberikan status data aplikasi (yang tidak valid, kotor, menyentuh, error):
Contoh
<form ng-app="" name="myForm" ng-init="myText = '[email protected]'">
Email:
<input type="email" name="myAddress" ng-model="myText"
required>
<h1>Status</h1>
{{myForm.myAddress.$valid}}
{{myForm.myAddress.$dirty}}
{{myForm.myAddress.$touched}}
</form>
Cobalah sendiri " CSS Kelas
The ng-model direktif menyediakan kelas CSS untuk elemen HTML, tergantung pada status mereka:
Contoh
<style>
input.ng-invalid {
background-color:
lightblue;
}
</style>
<body>
<form ng-app="" name="myForm">
Enter your name:
<input name="myAddress" ng-model="text" required>
</form>
Cobalah sendiri " The ng-model direktif menambahkan / menghapus kelas berikut, sesuai dengan status bidang bentuk:
- ng-kosong
- ng-tidak-kosong
- ng-menyentuh
- ng-tersentuh
- ng-valid
- ng-valid
- ng-kotor
- ng-pending
- ng-murni