ການມັດຖະບານ AngularJS

ການປະສົມກັນຂອງຂໍ້ມູນໃນ AngularJS ແມ່ນການປະສົມກັນລະຫວ່າງຫົວເກບແລະທີ່ແຍກ.

ຂໍ້ມູນຫົວເກບ

AngularJS ສະແດງຂໍ້ມູນຂອງຫົວເກບທີ່ມີຂື້ນພາຍໃນ. ຂໍ້ມູນຫົວເກບແມ່ນການລວມຂອງຂໍ້ມູນທີ່ສາມາດໃຊ້ໃຫ້ກັບຄູ່ຂອງຄູ່.

ຄວາມລະບຸ

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

ສິນລະບົບ HTML

ສິນລະບົບ HTML ທີ່ກຳນົດຄູ່ຂອງ AngularJS ແມ່ນທີ່ແຍກ.

ທີ່ແຍກສາມາດເຂົ້າເຖິງຫົວເກບ, ແລະມີຫຼາຍວິທີທີ່ສາມາດສະແດງຂໍ້ມູນຫົວເກບໃນທີ່ແຍກ.

ທ່ານສາມາດໃຊ້ ng-bind ຄຳສັ່ງ, ທີ່ບັນທຶກ innerHTML ຂອງບັນດາປະກອບຂອງສິນລະບົບໃຫ້ກັບຂໍ້ມູນຫົວເກບທີ່ກຳນົດໄວ້:

ຄວາມລະບຸ

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

ທ້າວຍອມພາສາບັນຕັບ

ທ່ານສາມາດໃຊ້ {{ }} ເພື່ອສະແດງຂໍ້ມູນຫົວເກບ:

ຄວາມລະບຸ

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

ທ້າວຍອມພາສາບັນຕັບ

ຫຼື, ທ່ານສາມາດໃຊ້ ng-model ຄຳສັ່ງບັນທຶກຫົວເກບໃຫ້ກັບທີ່ແຍກ.

ຄຳສັ່ງ ng-model

ການນຳໃຊ້ ng-model ຄຳສັ່ງບັນທຶກສະແດງຂອງຂໍ້ມູນຫົວເກບໃຫ້ກັບສິນລະບົບ HTML (input, select, textarea) ສະແດງຂອງພາບ.

ຄວາມລະບຸ

<input ng-model="firstname">

ທ້າວຍອມພາສາບັນຕັບ

ng-model ຄຳສັ່ງບັນທຶກສະແດງຂອງຫົວເກບແລະທີ່ແຍກ.

ການປະສົມກັນສອງແຍກ

ການປະສົມກັນຂອງຂໍ້ມູນໃນ AngularJS ແມ່ນການປະສົມກັນລະຫວ່າງຫົວເກບແລະທີ່ແຍກ.

ຍ້ອນການປ່ຽນແປງຂອງຂໍ້ມູນໃນຫົວເກບ, ທີ່ແຍກຄວາມຊັນນະສະພາບຈະສະແດງການປ່ຽນແປງຂອງຂໍ້ມູນໃນທີ່ແຍກ. ນີ້ແມ່ນສິ່ງທີ່ກະຈັດກັນແລະທັນທີ, ເພື່ອຮັບປະກັນວ່າຫົວເກບແລະທີ່ແຍກຈະຍັງມີການປະສົມກັນທັນທີ.

ຄວາມລະບຸ

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

ທ້າວຍອມພາສາບັນຕັບ

AngularJS ຄວາມຄວິດ

ການປະກອບຄູ່ຂອງ AngularJS ແມ່ນຖືກຄວາມຄວບຄຸມໂດຍການຄວາມຊັນນະສະພາບ. ຂໍ້ມູນຈະຖືກບັນທຶກໃນຫົວເກບຄວາມຊັນນະສະພາບ.

ຍ້ອນການປະສົມກັນທັນທີຂອງຫົວເກບແລະທີ່ແຍກຄວາມຊັນນະສະພາບຫຼັງຈາກຄວາມສະທ້ອນຢ່າງທັນທີຂອງ AngularJS, ການຄວາມຊັນນະສະພາບຈະສະແດງການປ່ຽນແປງທັງໝົດທີ່ເຮັດຢູ່ໃນຫົວເກບ.

ຄວາມລະບຸ

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

ທ້າວຍອມພາສາບັນຕັບ