ทำความเข้าใจกับ expressions ใน angularjs อย่างง่าย ตอนที่ 14

เขียนเมื่อ 10 ปีก่อน โดย Ninenik Narkdee
angulary expression

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ angulary expression

ดูแล้ว 6,346 ครั้ง


Angular Expressions คือ รูปแบบโค้ดของ javascript แบบง่าย สั้นๆ 
ที่ใช้กำหนดผูกการใช้งานกับตัวแปร โดยมีรูปแบบ
 
{{ expression }}
 
ตัวอย่าง
 
{{1+1}} 
{{1+2}} 
{{a+b}} 
{{user.name}} 
{{items[index]}} 
 
จะมีการทำงานคล้าย eval() ใน javascript แต่ใน angularjs จะไม่ได้ใช้
คำสั่ง eval() แต่ใช้ sevice $parse แทน
 
การทำงาน เช่น ถ้าเรา เอา {{1+1}} 
 
ไปแทรกไว้หน้า view ข้อมูล 
 
<p>{{1+1}}</p>
 
ผลลัพธ์ที่แสดงทาง browser ก็จะเป็น
 
<p>2</p>
แบบนี้เป็นต้น
 
 
Angular Expressions จะทำงานภายในขอบเขตของ scope object
ซึ่งต่างจาก JavaScript expressions ที่ทำงานอิงไปกับ global window ดังนั้น
จึงไม่สามารถเรียกใช้งาน window document หรือ location ซึ่งเป็นตัวแปร global
.ใน javascript แบบปกติได้ 
แต่สามารถใช้วิธีเรียกใช้งาน service ที่ angularjs กำหนด เพื่อเรียกใช้ตัวแปร global ได้
เช่น $window แทน window และ $location แทน location หรือ window.location เป็นต้น
 
หากมีการกำหนด expression ไม่ถูกต้อง จะไม่มีการแจ้ง error แต่ข้อมูลจะถูกกำหนดให้
จะเป็น undefined หรือ null 
 
เราสามารถใช้ filter module ของ angularjs กำหนดรูปแบบการแสดง 
ข้อมูลใน expression ได้
 
{{ 1+1 | currency }}
 
ผลลัพธ์ที่แสดงทาง browser ก็จะเป็น
 
$2.00
 
ไม่สามารถกำหนดรูปแบบ control flow statments 
ใน angular expression ได้ เช่น
 
{{
if(...){  // if statment
...
}
}}

{{
for(....){  // for statement
....
}
}}
 
ยกเว้นกรณี การใช้งาน ในรูปแบบ เงื่อนไข (a ? b : c) สามารถใช้งานได้
แบบนี้สามารถทำได้ รูปแบบย่อของ if statement
 
{{
(a==1)?a:0    
}}
 
angular expression จะไม่ทำงานภายนอก scope
 
<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js"></script>
    <title>Document</title>
</head>
<body>
    {{name}}
   <div ng-controller="myCtrl">
       {{myname}}
   </div>
 
<script type="text/javascript">
angular.module('app',[])
.controller('myCtrl',['$scope',function($scope){
    $scope.name="demo"; 
    $scope.myname="Ninenik"; 
}]);
</script>       
</body>
</html>
 
จากโค้ดจะเห็นว่า ใน expression ที่ 2 เท่านั้นที่ทำงาน
ส่วน {{name}}  จะไม่แสดงค่า เนื่องจากอยู่ภายนอก scope
 
อย่างไรก็ตาม เราสามารถกำหนด ให้    {{name}}  นี้แสดงค่าได้
โดยการทำให้อยู่ภายใน $rootScope ซึ่งจะเริ่มจากตำแหน่ง
 
<html ng-app="app">
 
โดย inject $rootScope เข้าไปและกำหนดค่าได้ดังนี้
 
angular.module('app',[])
.controller('myCtrl',['$scope','$rootScope',function($scope,$rootScope){
    $scope.$rootScope="demo"; 
    $scope.myname="Ninenik"; 
}]);

 
แบบนี้ ค่า {{name}} ก็จะแสดงคำว่า demo
 
 
การกำหนดให้ เรียกใช้งาน {{expression}} ครั้งเดียว
หรือ One-time binding จะกำหนดในรูปแบบ {{::expression}}
หากมีการกำหนดในรูปบบนี้ ค่า จะไม่เปลี่ยนแปลง เมื่อมีการกำหนดค่า หรือเปลี่ยน
แปลงค่าข้อมูลด้วยฟังก์ชั่นเพิ่มเติมทีหลัง
 
การใช้งาน expression ใน directive ประเภท event เช่น ngClick,ngPress ... 
จะทำให้เราสามารถเรียกใช้งาน event object ในรูปแบบ $event ภายใน scope ได้
 
เช่น
 
<button type="button" ng-click="dosomething($event)">Run</button>

<script type="text/javascript"> 
angular.module('app',[])
.controller('myCtrl',['$scope','$rootScope',function($scope,$rootScope){
    $scope.$rootScope="demo"; 
    $scope.myname="Ninenik"; 
    $scope.dosomething = function(event){
      console.log(event);  
    };
}]);
</script>
 
 
เนื้อหานี้อ้างอิงจาก https://docs.angularjs.org/guide/expression 
อธิบายตามความเข้าใจ เป็นข้อมูลสำหรับศึกษาส่วนอื่นต่อไป


กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ











URL สำหรับอ้างอิง





คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )







เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ