Data yang mengikat di AngularJS adalah sinkronisasi antara model dan tampilan.
Model data
AngularJS aplikasi 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";
});
HTML View
Wadah HTML mana aplikasi AngularJS ditampilkan, disebut pandangan.
Pandangan memiliki akses ke model, dan ada beberapa cara untuk menampilkan data model dalam pandangan.
Anda dapat menggunakan ng-bind direktif, yang akan mengikat innerHTML dari elemen ke properti model tertentu:
Anda juga dapat menggunakan kawat gigi ganda {{ }} {{ }} {{ }} Untuk menampilkan konten dari model:
Atau Anda dapat menggunakan ng-model direktif pada HTML kontrol untuk mengikat model untuk pemandangan.
The ng-model Directive
Gunakan ng-model direktif untuk mengikat data dari model ke tampilan pada kontrol HTML (input, pilih, textarea)
The ng-model direktif menyediakan dua arah mengikat antara model dan tampilan.
Dua arah Binding
Data yang mengikat di AngularJS adalah sinkronisasi antara model dan tampilan.
Ketika data dalam perubahan model, pandangan mencerminkan perubahan, dan ketika data dalam perubahan tampilan, model diperbarui juga. Hal ini terjadi segera dan secara 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>
Cobalah sendiri " AngularJS Pengontrol
Aplikasi di AngularJS dikendalikan oleh pengendali. Baca tentang controller di AngularJS Controller bab.
Karena sinkronisasi langsung dari model dan tampilan, controller dapat benar-benar terpisah dari pandangan, dan hanya berkonsentrasi pada model data. Berkat data yang mengikat di AngularJS, pandangan akan mencerminkan perubahan yang dibuat di controller.
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.changeName
= function() {
$scope.firstname
= "Nelly";
}
});
</script>
Cobalah sendiri "