ล่าสุดการพัฒนาเว็บบทเรียน
 

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 Directive

ใช้ ng-model สั่งการผูกข้อมูลจากแบบจำลองเพื่อมุมมองเกี่ยวกับการควบคุมแบบ HTML (input เลือก 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 = "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.changeName = function() {
        $scope.firstname = "Nelly";
    }
});
</script>
ลองตัวเอง»

❮ก่อนหน้า ถัดไปบท❯