นิพจน์ AngularJS
AngularJS ผูกข้อมูลกับ HTML โดยใช้Expressions
นิพจน์ AngularJS
นิพจน์ AngularJS สามารถเขียนได้ภายในเครื่องหมายปีกกาคู่:{{ expression }}
สามารถเขียนนิพจน์ AngularJS ภายในคำสั่ง:ng-bind="expression"
AngularJS จะแก้ไขนิพจน์และส่งกลับผลลัพธ์ตรงที่เขียนนิพจน์
นิพจน์ AngularJSนั้นเหมือนกับนิพจน์ JavaScript มาก:สามารถประกอบด้วยตัวอักษร ตัวดำเนินการ และตัวแปร
ตัวอย่าง {{ 5 + 5 }} หรือ {{ ชื่อ + " " + นามสกุล }}
ตัวอย่าง
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
หากคุณลบng-appคำสั่ง HTML จะแสดงนิพจน์ตามที่เป็นอยู่โดยไม่ต้องแก้ไข:
ตัวอย่าง
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div>
<p>My first expression: {{ 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 Numbers
ตัวเลข AngularJS เหมือนกับหมายเลข JavaScript:
ตัวอย่าง
<div ng-app="" ng-init="quantity=1;cost=5">
<p>Total in dollar: {{ quantity * cost }}</p>
</div>
ตัวอย่างเดียวกันโดยใช้ng-bind:
ตัวอย่าง
<div ng-app="" ng-init="quantity=1;cost=5">
<p>Total in dollar: <span ng-bind="quantity * cost"></span></p>
</div>
การใช้ng-initงานไม่ธรรมดามาก คุณจะได้เรียนรู้วิธีที่ดีกว่าในการเริ่มต้นข้อมูลในบทเกี่ยวกับตัวควบคุม
AngularJS Strings
สตริง AngularJS เหมือนกับสตริง JavaScript:
ตัวอย่าง
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>The name is {{ firstName + " " + lastName }}</p>
</div>
ตัวอย่างเดียวกันโดยใช้ng-bind:
ตัวอย่าง
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>The name is <span ng-bind="firstName + ' ' + lastName"></span></p>
</div>
วัตถุ AngularJS
วัตถุ AngularJS เหมือนกับวัตถุ JavaScript:
ตัวอย่าง
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>The name is {{ person.lastName }}</p>
</div>
ตัวอย่างเดียวกันโดยใช้ng-bind:
ตัวอย่าง
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>The name is <span ng-bind="person.lastName"></span></p>
</div>
AngularJS Arrays
อาร์เรย์ AngularJS เหมือนกับอาร์เรย์ JavaScript:
ตัวอย่าง
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>The third result is {{ points[2] }}</p>
</div>
ตัวอย่างเดียวกันโดยใช้ng-bind:
ตัวอย่าง
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>The third result is <span ng-bind="points[2]"></span></p>
</div>
นิพจน์ AngularJS กับ นิพจน์ JavaScript
เช่นเดียวกับนิพจน์ JavaScript นิพจน์ AngularJS สามารถมีตัวอักษร ตัวดำเนินการ และตัวแปรได้
แตกต่างจากนิพจน์ JavaScript นิพจน์ AngularJS สามารถเขียนภายใน HTML
นิพจน์ AngularJS ไม่รองรับเงื่อนไข ลูป และข้อยกเว้น ในขณะที่นิพจน์ JavaScript รองรับ
นิพจน์ AngularJS รองรับตัวกรอง ในขณะที่นิพจน์ JavaScript ไม่รองรับ
เรียนรู้เกี่ยวกับ JavaScript ใน บทช่วย สอน JavaScriptของ เรา