การโยงข้อมูล AngularJS
การโยงข้อมูลใน AngularJS เป็นการซิงโครไนซ์ระหว่างโมเดลและมุมมอง
โมเดลข้อมูล
แอปพลิเคชัน AngularJS มักจะมีโมเดลข้อมูล ตัวแบบข้อมูลคือชุดของข้อมูลที่มีให้สำหรับแอปพลิเคชัน
ตัวอย่าง
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstname
= "John";
$scope.lastname = "Doe";
});
มุมมอง HTML
คอนเทนเนอร์ HTML ที่แสดงแอปพลิเคชัน AngularJS เรียกว่ามุมมอง
มุมมองมีสิทธิ์เข้าถึงแบบจำลอง และมีหลายวิธีในการแสดงข้อมูลแบบจำลองในมุมมอง
คุณสามารถใช้ng-bindคำสั่ง ซึ่งจะผูก innerHTML ขององค์ประกอบกับคุณสมบัติของโมเดลที่ระบุ:
ตัวอย่าง
<p ng-bind="firstname"></p>
คุณยังสามารถใช้เครื่องหมายปีกกาคู่เพื่อแสดงเนื้อหาจากโมเดล:{{ }}
ตัวอย่าง
<p>First name: {{firstname}}</p>
หรือคุณสามารถใช้ng-modelคำสั่งบนตัวควบคุม HTML เพื่อผูกโมเดลกับมุมมอง
คำng-modelสั่ง
ใช้ng-modelคำสั่งเพื่อผูกข้อมูลจากแบบจำลองกับมุมมองบนตัวควบคุม HTML (อินพุต เลือก พื้นที่ข้อความ)
ตัวอย่าง
<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
= "John";
$scope.lastname = "Doe";
});
</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
= "John";
$scope.changeName
= function() {
$scope.firstname
= "Nelly";
}
});
</script>