AngularJS การแสดงทางฟังก์ชัน
- หน้าก่อนหน้า AngularJS คำอธิบาย
- หน้าต่อไป AngularJS โมดูล
AngularJS ทำงานการแปลงภาษาผ่านตัวแสดงบอกความหมายให้แก่ HTML
AngularJS การแสดงทางฟังก์ชัน
AngularJS ตัวแสดงสามารถเขียนได้ในตัวเรียกแบบเปิดเซิร์ฟิส{{ expression }}。
AngularJS ตัวแสดงสามารถเขียนได้ในคำสั่งng-bind="expression"。
AngularJS จะทำงานการแปลงภาษาตัวแสดง และหาผลลัพธ์ที่ที่เขียนตัวแสดง
AngularJS การแสดงทางฟังก์ชันเหมือนกัน การแสดงทางภาษาจาวาสคริปต์：มันสามารถมีความหมายบูรณ์ ประเมินทางคณิตศาสตร์ และตัวแปร
ตัวอย่าง {{ 5 + 5 }} หรือ {{ firstName + " " + lastName }}
ตัวอย่าง
<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>ตัวแสดงของฉันครั้งแรก: {{ 5 + 5 }}</p>
</div>
</body>
</html>
ถ้าเอา ng-app คำสั่งที่ไม่ทำงานการแปลงภาษา ฮ์ทอมล์ล์จะแสดงความหมายตามตัวเดิม โดยไม่ทำงานการแปลงภาษา
ตัวอย่าง
<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<div>
<p>ตัวแสดงของฉันครั้งแรก: {{ 5 + 5 }}</p>
</div>
</body>
</html>
คุณสามารถเขียนตัวแสดงที่ที่คุณชื่นชอบ และ AngularJS จะทำงานการแปลงภาษาเพื่อหาผลลัพธ์
ตัวอย่าง: ให้ AngularJS เปลี่ยนค่าของคุณสมบัติ CSS ขององค์ประกอบ.
เปลี่ยนสีของช่องบอกข้อมูลด้านล่างโดยเปลี่ยนค่าของมัน:
ขาวน้ำเงินตัวอย่าง
<div ng-app="" ng-init="myCol='lightblue'">
<input style="background-color:{{myCol}}" ng-model="myCol">
</div>
AngularJS ตัวแปรแบบตัวเลข
AngularJS ตัวแปรแบบตัวเลขเหมือนตัวแปรแบบตัวเลข JavaScript:
ตัวอย่าง
<div ng-app="" ng-init="quantity=1;cost=5">
<p>จำนวนเงินรวม (เหรียญสุก)：{{ quantity * cost }}</p>
</div>
ใช้ ng-bind ตัวอย่างที่เหมือนกัน:
ตัวอย่าง
<div ng-app="" ng-init="quantity=1;cost=5"> <p>จำนวนเงินรวม (เหรียญสุก)：<span ng-bind="quantity * cost"></span></p> </div>
การใช้ ng-init ไม่เป็นไปตามปกติ. คุณจะเรียนรู้วิธีที่ดีกว่าในบทบาทของซับคอนโทรลเลอร์.
AngularJS แบบตัวแปรแบบแรงงาน
AngularJS แบบตัวแปรแบบแรงงานเหมือนตัวแปรแบบแรงงาน JavaScript:
ตัวอย่าง
<div ng-app="" ng-init="firstName='Bill';lastName='Gates'">
<p>ชื่อคือ {{ firstName + " " + lastName }}</p>
</div>
ตัวอย่างที่ใช้ ng-bind ตามเดียวกัน:
ตัวอย่าง
<div ng-app="" ng-init="firstName='Bill';lastName='Gates'"> <p>ชื่อคือ <span ng-bind="firstName + ' ' + lastName"></span></p> </div>
AngularJS แบบตัวแปรแบบแรงงาน
AngularJS แบบตัวแปรแบบแรงงานเหมือนตัวแปรแบบแรงงาน JavaScript:
ตัวอย่าง
<div ng-app="" ng-init="person={firstName:'Bill',lastName:'Gates'}">
<p>ชื่อคือ {{ person.lastName }}</p>
</div>
ตัวอย่างที่ใช้ ng-bind ตามเดียวกัน:
ตัวอย่าง
<div ng-app="" ng-init="person={firstName:'Bill',lastName:'Gates'}">
<p>ชื่อคือ <span ng-bind="person.lastName"></span></p>
</div>
AngularJS แบบตัวแปรแบบแรงงาน
AngularJS แบบตัวแปรแบบแรงงานเหมือนตัวแปรแบบแรงงาน JavaScript:
ตัวอย่าง
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>ผลลัพธ์ที่สามคือ {{ points[2] }}</p>
</div>
ตัวอย่างที่ใช้ ng-bind ตามเดียวกัน:
ตัวอย่าง
<div ng-app="" ng-init="points=[1,15,19,2,40]"> <p>ผลลัพธ์ที่สามคือ <span ng-bind="points[2]"></span></p> </div>
การแสดงทางฟังก์ชัน AngularJS และ การแสดงทางฟังก์ชัน JavaScript
เหมือนการแสดงทางฟังก์ชัน JavaScript การแสดงทางฟังก์ชัน AngularJS สามารถมีความหมายบูทรีล ตัวที่มีความหมาย และตัวแปร
ต่างจากการแสดงทางฟังก์ชัน JavaScript การแสดงทางฟังก์ชัน AngularJS สามารถเขียนได้ใน HTML ด้านใน
การแสดงทางฟังก์ชัน AngularJS ไม่สนับสนุนสัญญาณเงื่อนไข การวนลูปและการจัดการข้อผิดพลาด ในขณะที่การแสดงทางฟังก์ชัน JavaScript สนับสนุน
AngularJS การแสดงทางฟังก์ชันสนับสนุนฟิลเตอร์ ในขณะที่การแสดงทางฟังก์ชัน JavaScript ไม่สนับสนุน
ในคู่มือต่อรอง JavaScript ของเรา คุณจะพบข้อมูลเกี่ยวกับ JavaScript
- หน้าก่อนหน้า AngularJS คำอธิบาย
- หน้าต่อไป AngularJS โมดูล
