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

Jquery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , Jquery ม Ajax

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

User avatar
thatsawan
PHP VIP Members
PHP VIP Members
Posts: 25983
Joined: 31/03/2014 10:02 am
Contact:

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

Post by thatsawan »

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

Code: Select all

<!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 687 times
2016-04-23_14-25-41.png
2016-04-23_14-25-41.png (28.63 KiB) Viewed 687 times
ตัวอย่างที่ 2 two way binding

Code: Select all

<!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 687 times
2016-04-23_14-35-11.png
2016-04-23_14-35-11.png (28.54 KiB) Viewed 687 times

  • Similar Topics
    Replies
    Views
    Last post

Return to “Jquery & Ajax Knowledge”

Who is online

Users browsing this forum: No registered users and 4 guests