ikat data AngularJS

Pengikat data di AngularJS adalah sinkronisasi antara model dan view.

Model Data

Aplikasi AngularJS biasanya memiliki model data. Model data adalah kumpulan data yang dapat digunakan untuk aplikasi.

contoh

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.firstname = "Bill";
  $scope.lastname = "Gates";
});

View HTML

Kontainer HTML untuk aplikasi AngularJS disebut view.

View dapat mengakses model, dan ada beberapa cara untuk menampilkan data model di view.

Anda dapat menggunakan ng-bind instruksi, yang akan mengikat innerHTML elemen ke properti model yang ditentukan:

contoh

<p ng-bind="firstname"></p>

Coba Sendiri

Anda juga dapat menggunakan {{ }} untuk menampilkan konten di model:

contoh

<p>First name: {{firstname}}</p>

Coba Sendiri

atau, Anda dapat menggunakan ng-model Instruksi mengikat model ke view.

instruksi ng-model

Penggunaan ng-model Instruksi mengikat data di model ke view HTML kontrol (input, select, textarea).

contoh

<input ng-model="firstname">

Coba Sendiri

ng-model Instruksi menyediakan pengikat dua-awalan antara model dan view.

Pengikat Dua-Awalan

Pengikat data di AngularJS adalah sinkronisasi antara model dan view.

Ketika data di model berubah, view akan merefleksikan perubahan itu, dan saat data di view berubah, model juga akan diupdate. Ini terjadi segera dan otomatis, sehingga memastikan bahwa model dan view selalu diperbarui.

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 = "Bill";
  $scope.lastname = "Gates";
});
</script>

Coba Sendiri

Kontrol AngularJS

Aplikasi AngularJS diatur oleh controller. Silakan baca tentang controller di bab controller AngularJS.

Karena sinkronisasi langsung antara model dan view, controller dapat dipisahkan sepenuhnya dengan view, dan hanya fokus pada data model. Karena pengikat data di AngularJS, view akan merefleksikan setiap 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.firstname = "Bill";
  $scope.changeName = function() {
    $scope.firstname = "Nelly";
  }
});
</script>

Coba Sendiri