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

10 September 2014 เขียนเมื่อ 9 ปีก่อน โดย Ninenik Narkdee

angulary expression

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

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 เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ