นิพจน์ AngularJS: ARRAY, Objects, $eval, Strings [ตัวอย่าง]

โดย: เจมส์ ฮาร์ทแมน เจมส์ ฮาร์ทแมน
Hours วันที่อัพเดท

นิพจน์ JS เชิงมุมคืออะไร

นิพจน์คือตัวแปรที่ถูกกำหนดไว้ในวงเล็บคู่ {{ }} นิพจน์มักใช้กันทั่วไปใน Angular JS และคุณจะเห็นนิพจน์เหล่านี้ในบทช่วยสอนก่อนหน้านี้ของเรา

อธิบายนิพจน์ Angular.js พร้อมตัวอย่าง

นิพจน์ AngularJS คือสิ่งที่เขียนภายในวงเล็บคู่ {{expression}}

ไวยากรณ์:

ตัวอย่างง่ายๆ ของนิพจน์คือ {{5 + 6}}

นิพจน์ Angular.JS ใช้เพื่อผูกข้อมูลกับ HTML เช่นเดียวกับคำสั่ง ng-bind AngularJS จะแสดงข้อมูลในตำแหน่งที่วางนิพจน์ทุกประการ

ลองดูตัวอย่างของนิพจน์ Angular.JS

ในตัวอย่างนี้ เราต้องการแสดงการบวกตัวเลขแบบง่ายๆ เป็นนิพจน์เท่านั้น

นิพจน์ Angular.js

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>

</head>
<body>

    <script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
    <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>

    <h1> Guru99 Global Event</h1>

    <div ng-app="">
        Addition : {{6+9}}
    </div>

</body>
</html>

คำอธิบายรหัส:

  1. คำสั่ง ng-app ในตัวอย่างของเราว่างเปล่าดังที่แสดงในภาพหน้าจอด้านบน นี่หมายความว่าไม่มีโมดูลที่จะกำหนดคอนโทรลเลอร์ สั่งบริการที่แนบมากับรหัส
  2. เรากำลังเพิ่มนิพจน์ง่ายๆ ที่ดูเป็นการบวกตัวเลข 2 ตัว

หากโค้ดถูกดำเนินการสำเร็จ ผลลัพธ์ต่อไปนี้จะปรากฏขึ้นเมื่อคุณรันโค้ดในเบราว์เซอร์

Output:

นิพจน์ Angular.js

จากผลลัพธ์ที่ได้

  • จะเห็นได้ว่ามีการบวกเลข 9 กับ 6 เข้าด้วยกัน และมีค่าเพิ่มเท่ากับ 15

เชิงมุม.JS Numbers

นิพจน์สามารถใช้กับตัวเลขได้เช่นกัน ลองดูตัวอย่างของนิพจน์ Angular.JS ที่ใช้ตัวเลข

ในตัวอย่างนี้ เราต้องการแสดงการคูณตัวแปรตัวเลข 2 ตัวที่เรียกว่า margin และ profit อย่างง่ายๆ และแสดงค่าที่คูณกัน

เชิงมุม.JS Numbers

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>

</head>
<body>

    <script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
    <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>

    <h1> Guru99 Global Event</h1>

    <div ng-app="" ng-init="margin=2;profit=200">
        Total profit margin

        {{margin*profit}}
    </div>

</body>
</html>

คำอธิบายรหัส:

  1. คำสั่ง ng-init ใช้ใน angular.js เพื่อกำหนดตัวแปรและค่าที่สอดคล้องกันในมุมมองนั้นเอง มันค่อนข้างเหมือนกับการกำหนดตัวแปรท้องถิ่นให้เขียนโค้ดอะไรก็ได้ ภาษาโปรแกรม- ในกรณีนี้ เรากำลังกำหนดตัวแปร 2 ตัวที่เรียกว่ามาร์จิ้นและกำไร และกำหนดค่าให้กับตัวแปรเหล่านั้น
  2. จากนั้นเราจะใช้ตัวแปรท้องถิ่น 2 ตัวแล้วคูณค่าของมัน

หากโค้ดถูกดำเนินการสำเร็จ ผลลัพธ์ต่อไปนี้จะปรากฏขึ้นเมื่อคุณรันโค้ดในเบราว์เซอร์

Output:

เชิงมุม.JS Numbers

จากผลลัพธ์ที่ได้

  • จะเห็นได้ชัดเจนว่ามีการคูณเลข 2 กับ 2 และแสดงค่าคูณ 200 ด้วย

บทความที่เกี่ยวข้อง

สตริง AngularJS

นิพจน์สามารถใช้เพื่อทำงานกับสตริงได้เช่นกัน ลองดูตัวอย่างนิพจน์ Angular JS พร้อมสตริง

ในตัวอย่างนี้ เราจะกำหนด 2 สตริงของ "ชื่อ" และ "นามสกุล" และแสดงโดยใช้นิพจน์ตามลำดับ

สตริง AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>

</head>
<body>

    <script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
    <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>

    <h1> Guru99 Global Event</h1>

    <div ng-app="" ng-init="firstName='Guru';lastName='99'">

        &nbsp;&nbsp;&nbsp;
        First Name : {{firstName}}<br>&nbsp;&nbsp;&nbsp;
        last Name : {{lastName}}

    </div>

</body>
</html>

คำอธิบายรหัส:

  1. คำสั่ง ng-init ถูกใช้เพื่อกำหนดตัวแปร firstName ด้วยค่า “Guru” และตัวแปรนามสกุลที่มีค่าเป็น “99”
  2. จากนั้นเราจะใช้นิพจน์ของ {{firstName}} และ {{lastName}} เพื่อเข้าถึงค่าของตัวแปรเหล่านี้และแสดงในมุมมองตามนั้น

หากโค้ดถูกดำเนินการสำเร็จ ผลลัพธ์ต่อไปนี้จะปรากฏขึ้นเมื่อคุณรันโค้ดในเบราว์เซอร์

Output:

สตริง AngularJS

จากผลลัพธ์จะเห็นได้ชัดเจนว่าค่า firstName และ lastName แสดงอยู่บนหน้าจอ

วัตถุ Angular.JS

สามารถใช้นิพจน์ในการทำงานได้ Javaต้นฉบับ วัตถุเช่นกัน

ลองดูตัวอย่างนิพจน์ Angular.JS ด้วยวัตถุจาวาสคริปต์ วัตถุจาวาสคริปต์ประกอบด้วยคู่ค่าชื่อ

ด้านล่างนี้เป็นตัวอย่างของไวยากรณ์ของวัตถุจาวาสคริปต์

ไวยากรณ์:

var car = {type:"Ford", model:"Explorer", color:"White"};

ในตัวอย่างนี้ เราจะกำหนดวัตถุหนึ่งเป็นวัตถุบุคคลซึ่งจะมีคู่ค่าคีย์ 2 คู่คือ "ชื่อ" และ "นามสกุล"

วัตถุ Angular.JS

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>

</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="" ng-init="person={firstName:'Guru',lastName:'99'}">

    &nbsp;&nbsp;&nbsp;
    First Name : {{person.firstName}}<br>&nbsp;&nbsp;&nbsp;
    Last Name : {{person.lastName}}

</div>

</body>
</html>

คำอธิบายรหัส:

  1. คำสั่ง ng-init ใช้เพื่อกำหนดบุคคลของวัตถุซึ่งจะมีคู่ค่าคีย์ของ firstName ที่มีค่า "Guru" และตัวแปรนามสกุลที่มีค่าเป็น "99"
  2. จากนั้นเราจะใช้นิพจน์ของ {{person.firstName}} และ {{person.secondName}} เพื่อเข้าถึงค่าของตัวแปรเหล่านี้และแสดงในมุมมองตามนั้น เนื่องจากตัวแปรสมาชิกจริงเป็นส่วนหนึ่งของบุคคลวัตถุ พวกเขาจึงต้องเข้าถึงตัวแปรด้วยเครื่องหมายจุด (.) เพื่อเข้าถึงค่าจริง

หากโค้ดถูกดำเนินการสำเร็จ ผลลัพธ์ต่อไปนี้จะปรากฏขึ้นเมื่อคุณรันโค้ดในเบราว์เซอร์

Output:

วัตถุ Angular.JS

จากผลลัพธ์ที่ได้

  • จะเห็นได้ชัดเจนว่าค่า “firstName” และ “secondName” แสดงอยู่บนหน้าจอ

อาร์เรย์ AngularJS

นิพจน์สามารถใช้เพื่อทำงานกับอาร์เรย์ได้เช่นกัน ลองดูตัวอย่างนิพจน์ Angular JS พร้อมอาร์เรย์

ในตัวอย่างนี้ เราจะกำหนดอาร์เรย์ที่จะเก็บคะแนนของนักเรียนใน 3 วิชา ในมุมมองเราจะแสดงค่าของเครื่องหมายเหล่านี้ตามลำดับ

อาร์เรย์ AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="" ng-init="marks=[1,15,19]">

    Student Marks<br>&nbsp;&nbsp;&nbsp;
    Subject1 : {{marks[0] }}<br>&nbsp;&nbsp;&nbsp;
    Subject2 : {{marks[1] }}<br>&nbsp;&nbsp;&nbsp;
    Subject3 : {{marks[2] }}<br>&nbsp;&nbsp;&nbsp;
</div>

</body>
</html>

คำอธิบายรหัส:

  1. คำสั่ง ng-init ถูกใช้เพื่อกำหนดอาร์เรย์ด้วยชื่อ "เครื่องหมาย" โดยมีค่า 3 ค่าคือ 1, 15 และ 19
  2. จากนั้นเราจะใช้นิพจน์ของเครื่องหมาย [ดัชนี] เพื่อเข้าถึงแต่ละองค์ประกอบของอาร์เรย์

หากโค้ดถูกดำเนินการสำเร็จ ผลลัพธ์ต่อไปนี้จะปรากฏขึ้นเมื่อคุณรันโค้ดในเบราว์เซอร์

Output:

อาร์เรย์ AngularJS

จากเอาท์พุตจะเห็นได้ชัดเจนว่าเครื่องหมายที่กำลังแสดงนั้นถูกกำหนดไว้ในอาร์เรย์

ความสามารถและข้อจำกัดของ AngularJS Expression

ความสามารถของ Angular.JS Expression

  1. สำนวนเชิงมุมก็เช่น Javaการแสดงออกของสคริปต์ ดังนั้นจึงมีพลังและความยืดหยุ่นเท่ากัน
  2. In Javaเมื่อคุณพยายามประเมินคุณสมบัติที่ไม่ชัดเจน สคริปต์จะสร้าง ReferenceError หรือ TypeError ใน Angular การประเมินนิพจน์จะให้อภัยและสร้างค่าที่ไม่ชัดเจนหรือเป็นค่าว่าง
  3. เราสามารถใช้ตัวกรองภายในนิพจน์เพื่อจัดรูปแบบข้อมูลก่อนแสดงได้

ข้อจำกัดของนิพจน์ JS เชิงมุม

  1. ขณะนี้ยังไม่มีความพร้อมในการใช้เงื่อนไข ลูป หรือข้อยกเว้นในนิพจน์เชิงมุม
  2. คุณไม่สามารถประกาศฟังก์ชันในนิพจน์เชิงมุมได้ แม้ว่าจะอยู่ในคำสั่ง ng-init ก็ตาม
  3. เราไม่สามารถสร้างนิพจน์ทั่วไปในนิพจน์เชิงมุมได้ นิพจน์ทั่วไปคือการผสมผสานระหว่างสัญลักษณ์และอักขระ ซึ่งใช้ในการค้นหาสตริง เช่น .*\.txt$ ไม่สามารถใช้นิพจน์ดังกล่าวภายในนิพจน์ Angular JS
  4. นอกจากนี้ ไม่สามารถใช้หรือถือเป็นโมฆะในนิพจน์เชิงมุมได้

ความแตกต่างระหว่างนิพจน์และ $eval

ฟังก์ชัน $eval ช่วยให้สามารถประเมินนิพจน์จากภายในคอนโทรลเลอร์ได้ ดังนั้นในขณะที่ใช้นิพจน์สำหรับการประเมินในมุมมอง $eval จะถูกนำมาใช้ในฟังก์ชันคอนโทรลเลอร์

ลองดูตัวอย่างง่ายๆเกี่ยวกับเรื่องนี้

ในตัวอย่างนี้

เราจะใช้ฟังก์ชัน $eval เพื่อเพิ่มตัวเลข 2 ตัวและทำให้มันพร้อมใช้งานในวัตถุขอบเขตเพื่อให้สามารถแสดงในมุมมองได้

ความแตกต่างระหว่างนิพจน์และ $eval

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<div ng-app="sampleApp" ng-controller="AngularController">
    <h1> Guru99 Global Event</h1>
    {{value}}
</div>
<script>
    var sampleApp = angular.module('sampleApp',[]);
    sampleApp.controller('AngularController',function($scope){
        $scope.a=1;
        $scope.b=1;

        $scope.value=$scope.$eval('a+b');
    });
</script>

</body>
</html>

คำอธิบายรหัส:

  1. ขั้นแรกเราจะกำหนดตัวแปร 2 ตัวคือ 'a' และ 'b' โดยแต่ละตัวมีค่าเท่ากับ 1
  2. เรากำลังใช้ฟังก์ชัน $scope.$eval เพื่อประเมินการเพิ่มตัวแปร 2 ตัวและกำหนดให้กับตัวแปรขอบเขต 'value'
  3. จากนั้นเราจะแสดงค่าของตัวแปร 'value' ในมุมมอง

หากโค้ดถูกดำเนินการสำเร็จ ผลลัพธ์ต่อไปนี้จะปรากฏขึ้นเมื่อคุณรันโค้ดในเบราว์เซอร์

Output:

ความแตกต่างระหว่างนิพจน์และ $eval

ผลลัพธ์ข้างต้นแสดงผลลัพธ์ของนิพจน์ที่ได้รับการประเมินใน ตัวควบคุมผลลัพธ์ข้างต้นแสดงให้เห็นว่านิพจน์ $eval ถูกใช้เพื่อดำเนินการบวกตัวแปรขอบเขต 2 ตัวคือ 'a และ b' โดยส่งและแสดงผลลัพธ์ในมุมมอง

สรุป

  • เราได้เห็นวิธีการแสดงออกใน JS เชิงมุม สามารถใช้ในการประเมินอย่างสม่ำเสมอ Javaสคริปต์เหมือนการแสดงออกเช่นการบวกตัวเลขแบบง่ายๆ
  • คำสั่ง ng-init สามารถใช้เพื่อกำหนดตัวแปรในบรรทัดซึ่งสามารถใช้ในมุมมองได้
  • นิพจน์สามารถทำงานกับประเภทดั้งเดิมเช่นสตริงและตัวเลขได้
  • นิพจน์ยังสามารถใช้เพื่อทำงานกับประเภทอื่นๆ เช่น Javaวัตถุสคริปต์และอาร์เรย์
  • นิพจน์ใน Angular JS มีข้อจำกัดบางประการ เช่น การไม่มีนิพจน์ทั่วไป หรือใช้ฟังก์ชัน ลูป หรือคำสั่งแบบมีเงื่อนไข

ที่คุณอาจชอบ: