Table of Content
- Introduction
- Two-Way Data-Binding Pada Tag Input
- Two-Way Data-Binding Pada Tag Radio
- Two-Way Data-Binding Pada Tag Select
- Two-Way Data-Binding Pada Tag Textarea
Introduction
Pada kali ini kita akan berkenalan dengan directive ngModel yg merupakan kunci untuk mengerti penggunaan two-way data-binding.
Two-way data-binding atau binding dua arah adalah sinkronisasi data secara otomatis antara model dan komponen sebagai view-nya, setiap perubahan yg terjadi pada model akan berdampak pula pada view nya.
Format Penulisan :
<tag ng-model="nama_model"></tag>Two-Way Data-Binding Pada Tag Input
<!DOCTYPE html>
<html lang="en">
<head>
<title>Latihan Angular</title>
<script src="angular.min.js"></script>
</head>
<body ng-app>
<input type="text" ng-model="namaku"> {{ namaku }}
</body>
</html>Pada saat melakukan input pada textbox maka kata yg sama akan muncul di sebelahnya secara realtime.
Two-Way Data-Binding Pada Tag Radio
<!DOCTYPE html>
<html lang="en">
<head>
<title>Latihan Angular</title>
<script src="angular.min.js"></script>
</head>
<body ng-app>
<h1>Latihan AngularJS</h1>
<input type="radio" ng-model="makanan" value="Siomay">Siomay
<input type="radio" ng-model="makanan" value="Sempol">Sempol
<input type="radio" ng-model="makanan" value="Lontong">Lontong
<p>Kamu memilih {{ makanan }}</p>
</body>
</html>Two-Way Data-Binding Pada Tag Select
<!DOCTYPE html>
<html lang="en">
<head>
<title>Latihan Angular</title>
<script src="angular.min.js"></script>
</head>
<body ng-app>
<h1>Latihan AngularJS</h1>
<select ng-model="makanan">
<option value="Siomay">Siomay</option>
<option value="Sempol">Sempol</option>
<option value="Lontong">Lontong</option>
</select>
<p>Kamu memilih {{ makanan }}</p>
</body>
</html>Two-Way Data-Binding Pada Tag Textarea
<!DOCTYPE html>
<html lang="en">
<head>
<title>Latihan Angular</title>
<script src="angular.min.js"></script>
</head>
<body ng-app>
<h1>Latihan AngularJS</h1>
<textarea ng-model="komentar" cols="40" rows="4"></textarea>
<p>Komentar : {{ komentar }}</p>
</body>
</html>