AngularJs : การใช้งาน $scope ตัวเชื่อมระหว่าง HTML กับ JavaScript (two way binding angular)

jQuery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , jQuery และ Ajax

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
thatsawan
PHP VIP Members
PHP VIP Members
โพสต์: 28508
ลงทะเบียนเมื่อ: 31/03/2014 10:02 am
ติดต่อ:

AngularJs : การใช้งาน $scope ตัวเชื่อมระหว่าง HTML กับ JavaScript (two way binding angular)

โพสต์ที่ยังไม่ได้อ่าน โดย thatsawan »

ตัวแปร $scope คือ ตัวเชื่อมระหว่าง HTML กับ JavaScript ทำงานเเบบ two way binding angular
ตัวอย่างเเรก จะเป็นการแสดงผลเเบบ one way binding

โค้ด: เลือกทั้งหมด

<!DOCTYPE html>
<html lang="en-US">
<script src="angular.js"></script>


  <body>
    <div ng-app="myApp" ng-controller="myAppController">
        <h1>Hello World {{name}} </h1>
    </div>
  </body>

  <script>
   var myApp = angular.module('myApp', []);
    myApp.controller("myAppController",function($scope){

      $scope.name = "Thatsawan";

    });
   </script>


</html>
2016-04-23_14-17-15.png
2016-04-23_14-17-15.png (62.88 KiB) Viewed 1294 times
2016-04-23_14-25-41.png
2016-04-23_14-25-41.png (28.63 KiB) Viewed 1294 times
ตัวอย่างที่ 2 two way binding

โค้ด: เลือกทั้งหมด

<!DOCTYPE html>
<html lang="en-US">
<script src="angular.js"></script>


  <body>
    <div ng-app="myApp" ng-controller="myAppController">
        <h1>Hello World {{name}} </h1>
        <input type="text" ng-model="name"/>
    </div>
  </body>

  <script>
   var myApp = angular.module('myApp', []);
    myApp.controller("myAppController",function($scope){

      $scope.name = "Thatsawan";

    });
   </script>


</html>
ให้เราเพิ่มตัว input เข้าไปเพื่อให้ user พิมพ์ข้อมูลลงไปจากนั้น มันก็จะเเสดงผลให้อัตโนมัติค่ะ
2016-04-23_14-34-27.png
2016-04-23_14-34-27.png (52.21 KiB) Viewed 1294 times
2016-04-23_14-35-11.png
2016-04-23_14-35-11.png (28.54 KiB) Viewed 1294 times
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 58