การเชื่อมโยงข้อมูล 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

เนื่องจากการปรับปรุงข้อมูลระหว่างโมเดลและวิวเป็นเวลาอย่างทันที คอนโทรลเลอร์สามารถแยกตัวจากวิวได้โดยแค่เน้นที่ข้อมูลโมเดลเท่านั้น。เนื่องจากการเชื่อมโยงข้อมูลใน 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>

ลองเดี๋ยวนี้