Pandu Bind Data AngularJS

Pengikat data di AngularJS adalah pengikatan segera antara model dan paparan.

Model data

Aplikasi AngularJS biasanya mempunyai model data. Model data adalah kumpulan data yang boleh digunakan untuk aplikasi.

Contoh

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

Paparan HTML

Kawasan HTML yang digunakan untuk aplikasi AngularJS disebut paparan.

Paparan boleh mengakses model, dan ada beberapa cara untuk menunjukkan data model di paparan.

Anda boleh menggunakan ng-bind Perintah, yang akan mengikat innerHTML elemen kepada properti model yang ditentukan:

Contoh

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

Cuba Sendiri

Anda juga boleh menggunakan tanda kurung besar dua {{ }} untuk menunjukkan kandungan di model:

Contoh

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

Cuba Sendiri

atau, anda boleh menggunakan di atas kawalan HTML ng-model Perintah mengikat model kepada paparan.

perintah ng-model

Dengan penggunaan ng-model Perintah mengikat data di model kepada paparan bagi kawalan HTML (input, select, textarea).

Contoh

<input ng-model="firstname">

Cuba Sendiri

ng-model Perintah memberikan pengikat dua arah antara model dan paparan.

Pengikat dua arah

Pengikat data di AngularJS adalah pengikatan segera antara model dan paparan.

Ketika data di model berubah, paparan akan mencerminkan perubahan itu, dan sekiranya data di paparan berubah, model juga akan diubah. Ini berlaku segera dan secara automatik, memastikan bahawa model dan paparan selalu diubah.

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>

Cuba Sendiri

Kawalan AngularJS

Aplikasi AngularJS diawali oleh pengawal. Sila baca tentang pengawal di bab pengawal AngularJS.

Kerana hubungan segera antara model dan paparan, pengawal boleh dipisahkan sepenuhnya daripada paparan, hanya fokuskan kepada data model. Kerana pengikat data AngularJS, paparan akan mencerminkan setiap perubahan yang dibuat dalam pengawal.

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>

Cuba Sendiri