AngularJS : Model dan Data Binding
Mahir Koding – Salah satu kemampuan lain AngularJS adalah memungkinkan adanya two way data binding. Disini, kamu bisa mensinkronisasikan data dari view dengan controller begitu pula sebaliknya. Untuk memungkinkan hal ini terjadi, maka kita membutuhkan directive ng-model. Setiap perubahan yang terjadi pada model, maka view juga dapat langsung terkena dampak perubahannya. Contoh untuk model dan data bindings sudah dijelaskan di materi sebelumnya namun akan dijelaskan kembali di materi kali ini.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="js/angular.min.js"></script>
</head>
<body ng-app="">
<p>Harga Barang : <input type="text" ng-model="price"></p>
<p>Total Belanjaan : <input type="number" ng-model="qty"></p>
<p>Total : {{ price*qty }}</p>
</body>
</html>
Contoh diatas adalah proses menunjukkan bagaimana 2 buah model (price dan qty) dapat saling terhubung secara synchronous sehingga hasil perkaliannya bisa langsung muncul. Tidak hanya itu, model yang ada di view juga bisa diakses melalui controller. Sebagai contoh, saya akan merubah kodingan yang di atas agar mempunyai controller.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="js/angular.min.js"></script>
</head>
<body ng-app="myApps" ng-controller="calcController">
<p>Harga Barang : <input type="text" ng-model="price"></p>
<p>Total Belanjaan : <input type="number" ng-model="qty"></p>
<p>Total : {{ price*qty }}</p>
</body>
<script type="text/javascript">
var app = angular.module("myApps", []).controller("calcController", function($scope){
$scope.price = 10000;
$scope.qty = 1;
})
</script>
</html>
Nah, melalui controller kita bisa menginisialisasi nilai awal bagi model price dan qty. Lalu, pertanyaannya adalah mengapa harus ada $scope dan apa itu controller? Kedua pertanyaan ini akan kita bahas di materi berikutnya.
Jika ada pertanyaan yang kurang jelas silahkan berkomentar di bawah. Atau, jika ingin request tutorial juga dapat ke halaman ini. Dukung terus Mahir Koding agar dapat selalu mengupdate artikel dengan share dan like artikel ini. Terima Kasih.
