Data Binding ng AngularJS

Ang pagkakabit ng datos sa AngularJS ay ang katugmaang pag-update sa pagitan ng modelo at view.

Modelo ng datos

Ang aplikasyon ng AngularJS ay mayroong modelo ng datos. Ang modelo ng datos ay ang koleksyon ng datos na maaring gamitin ng aplikasyon.

Instance

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

HTML view

Ang HTML container ng aplikasyon ng AngularJS ay tinatawag na view.

Ang view ay makakapasok sa modelo, at may ilang paraan para ipakita ang datos ng modelo sa view.

Maaari mong gamitin ng-bind Tagubilin, na magbibigay ng pagkakabit ng innerHTML ng elemento sa itinalagang modelo na propyetya:

Instance

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

Subukan ang Sarili

Maaari mo ring gamitin ang dalawang malaking parilya {{ }} Upang ipakita ang nilalaman ng modelo:

Instance

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

Subukan ang Sarili

O, maaari mong gamitin ang HTML kontrol sa ng-model Ang tagubilin ay nagkakabit ng modelo sa view.

ng-model tagubilin

Gamit ng-model Ang tagubilin ay nagkakabit ng datos sa modelo sa view ng HTML kontrol (input, select, textarea).

Instance

<input ng-model="firstname">

Subukan ang Sarili

ng-model Ang mga tagubilin ay nagbibigay ng pagkabit ng bilateral sa pagitan ng modelo at view.

Bilateral na pagkabit

Ang pagkakabit ng datos sa AngularJS ay ang katugmaang pag-update sa pagitan ng modelo at view.

Kapag nagbabago ang datos sa modelo, ang view ay magtataglay ng pagbabago na iyon, at kapag nagbabago ang datos sa view, ang modelo ay magiging napapanahon. Ito ay nangyayari sa tuwiran at agad, upang matiyak na ang modelo at view ay palaging napapanahon.

Instance

<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>

Subukan ang Sarili

Controller ng AngularJS

Ang aplikasyon sa AngularJS ay kinokontrol ng controller. Bumasa sa kabanata ng controller sa AngularJS para sa mas masidhing kaalaman tungkol sa controller.

Dahil sa katugmaang pag-update ng modelo at view, ang controller ay maaaring naihiwalay sa view, at kailangan lamang masukat sa datos ng modelo. Dahil sa pagkakabit ng datos sa AngularJS, ang view ay magtataglay ng anumang pagbabago sa controller.

Instance

<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>

Subukan ang Sarili