Pengikatan Data AngularJS
Pengikatan data di AngularJS adalah sinkronisasi antara model dan tampilan.
Model data
Aplikasi AngularJS biasanya memiliki model data. Model data adalah kumpulan data yang tersedia untuk aplikasi.
Contoh
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstname
= "John";
$scope.lastname = "Doe";
});
Tampilan HTML
Wadah HTML tempat aplikasi AngularJS ditampilkan, disebut view.
Tampilan memiliki akses ke model, dan ada beberapa cara untuk menampilkan data model dalam tampilan.
Anda dapat menggunakan ng-bindarahan, yang akan mengikat innerHTML dari elemen ke properti model yang ditentukan:
Contoh
<p ng-bind="firstname"></p>
Anda juga dapat menggunakan kurung kurawal ganda untuk menampilkan konten dari model:{{ }}
Contoh
<p>First name: {{firstname}}</p>
Atau Anda dapat menggunakan ng-modelarahan pada kontrol HTML untuk mengikat model ke tampilan.
ng-modelArahan _
Gunakan ng-modeldirektif untuk mengikat data dari model ke tampilan pada kontrol HTML (input, pilih, textarea)
Contoh
<input ng-model="firstname">
Arahan ng-modelmenyediakan pengikatan dua arah antara model dan tampilan.
Pengikatan dua arah
Pengikatan data di AngularJS adalah sinkronisasi antara model dan tampilan.
Saat data dalam model berubah, tampilan mencerminkan perubahan, dan saat data dalam tampilan berubah, model juga diperbarui. Ini terjadi segera dan otomatis, yang memastikan bahwa model dan tampilan diperbarui setiap saat.
Contoh
<div ng-app="myApp" ng-controller="myCtrl">
Name: <input ng-model="firstname">
<h1>{{firstname}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstname
= "John";
$scope.lastname = "Doe";
});
</script>
Pengontrol AngularJS
Aplikasi di AngularJS dikendalikan oleh pengontrol. Baca tentang pengontrol di bab AngularJS Controllers .
Karena sinkronisasi langsung dari model dan tampilan, pengontrol dapat sepenuhnya dipisahkan dari tampilan, dan hanya berkonsentrasi pada data model. Berkat pengikatan data di AngularJS, tampilan akan mencerminkan setiap perubahan yang dibuat di pengontrol.
Contoh
<div ng-app="myApp" ng-controller="myCtrl">
<h1 ng-click="changeName()">{{firstname}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstname
= "John";
$scope.changeName
= function() {
$scope.firstname
= "Nelly";
}
});
</script>