PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

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

10 September 2014 By


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 
อธิบายตามความเข้าใจ เป็นข้อมูลสำหรับศึกษาส่วนอื่นต่อไป

Tags:: angulary expression

เนื้อหาพิเศษ เฉพาะสำหรับสมาชิก

กรุณาล็อกอิน และลงชื่อติดตาม


สมัครสมาชิกได้ที่        ล็อกอินได้ที่   





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