AngularJS ผูกข้อมูลเพื่อใช้ HTML นิพจน์
AngularJS นิพจน์
AngularJS แสดงออกสามารถเขียนได้ภายในวงเล็บคู่: {{ expression }}
AngularJS แสดงออกยังสามารถเขียนได้ภายใน Directive: ng-bind=" expression "
AngularJS จะแก้ไขการแสดงออกและกลับผลตรงที่การแสดงออกเป็นลายลักษณ์อักษร
AngularJS สำนวนที่มีมากเช่นการแสดงออก javascript: พวกเขาสามารถมีตัวอักษรของผู้ประกอบการและตัวแปร
ตัวอย่างเช่น {{5 + 5}} หรือ {{firstName + "" + นามสกุล}}
ตัวอย่าง
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/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="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/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" value="{{myCol}}">
</div>
ลองตัวเอง» เบอร์ AngularJS
หมายเลข 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 อาร์เรย์
อาร์เรย์ 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 ไม่