การแสดงออกของ Angularjs
AngularJS ใช้การแสดงออกเพื่อผูกข้อมูลกับ HTML
นิพจน์ AngularJS เขียนด้วยวงเล็บปีกกาสองครั้ง: {{Expression}}
นิพจน์ AngularJS ผูกข้อมูลกับ HTML ซึ่งคล้ายกับคำสั่ง NG-bind
AngularJS จะ "เอาต์พุต" ข้อมูลที่ตำแหน่งที่เขียนนิพจน์
นิพจน์ AngularJS นั้นเหมือนกับ การแสดงออกของ JavaScript : พวกเขาสามารถมีตัวอักษรตัวดำเนินการและตัวแปร
อินสแตนซ์ {{5 + 5}} หรือ {{firstName + "" + LastName}}
รหัสตัวอย่าง:
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" }} </p> </div> </body> </html>
ผลการทำงาน:
การแสดงออกครั้งแรกของฉัน: 10
ตัวเลข angularjs
ตัวเลข AngularJS เป็นเหมือนหมายเลข JavaScript:
รหัสตัวอย่าง:
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" ng-init = "ปริมาณ = 1; cost = 5"> <p> ราคารวม: {{ปริมาณ * ต้นทุน}} </p> </div> </body> </html>ผลการทำงาน:
ราคารวม: 5
ตัวอย่างเดียวกันโดยใช้ NG-bind:
รหัสตัวอย่าง:
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" ng-init = "ปริมาณ = 1; cost = 5"> <p> ราคารวม: <span ng-bind = "ปริมาณ * ต้นทุน"> </span> </p> </div> </body> </html>
ผลการทำงาน:
ราคารวม: 5
หมายเหตุ: การใช้ NG-init นั้น ไม่ได้เป็นเรื่องธรรมดามากนัก คุณจะได้เรียนรู้วิธีที่ดีกว่าในการเริ่มต้นข้อมูลในบทคอนโทรลเลอร์
สตริง Angularjs
Strings Angularjs เป็นเหมือนสตริง JavaScript:
รหัสตัวอย่าง:
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" ng-init = "firstName = 'john'; lastName = 'doe'"> <p> ชื่อ: {{firstName + "" + นามสกุล}} </p> </div> </body> </html>ผลการทำงาน:
ชื่อ: John Doe
ตัวอย่างเดียวกันโดยใช้ NG-bind:
รหัสตัวอย่าง:
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" ng-init = "firstName = 'john'; lastName = 'doe'"> <p> ชื่อ: <span ng-bind = "FirstName + '' LastName"> </span> </p> </div> </body> </html>
ผลการทำงาน:
ชื่อ: John Doe
วัตถุ AngularJS
วัตถุ AngularJS เป็นเหมือนวัตถุ JavaScript:
รหัสตัวอย่าง:
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" ng-init = "person = {firstName: 'john', นามสกุล: 'doe'}"> <p> ชื่อสุดท้ายคือ {{person.lastname}} </p> </div> </body> </html>ผลการทำงาน:
ชื่อ DOE
ตัวอย่างเดียวกันโดยใช้ NG-bind:
รหัสตัวอย่าง:
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" ng-init = "person = {firstName: 'john', นามสกุล: 'doe'}"> <p> ชื่อสุดท้ายคือ <span ng-bind = "person.lastname"> </span> </p> </div> </body> </html>ผลการทำงาน:
ชื่อ DOE
อาร์เรย์ Angularjs
อาร์เรย์ AngularJS เป็นเหมือนอาร์เรย์ JavaScript:
รหัสตัวอย่าง:
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" ng-init = "คะแนน = [1,15,19,2,40]"> <p> ค่าที่สามคือ {{คะแนน [2]}} </p> </div> </body> </html>ผลการทำงาน:
ค่าที่สามคือ 19
ตัวอย่างเดียวกันโดยใช้ NG-bind:
รหัสตัวอย่าง:
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" ng-init = "คะแนน = [1,15,19,2,40]"> <p> ค่าที่สามคือ <span ng-bind = "คะแนน [2]"> </pan> </p> </div> </body> </html>
ผลการทำงาน:
ค่าที่สามคือ 19
นิพจน์ AngularJS และนิพจน์ JavaScript
เช่นเดียวกับนิพจน์ JavaScript นิพจน์ AngularJS สามารถมีตัวอักษรตัวดำเนินการและตัวแปร
ซึ่งแตกต่างจากการแสดงออกของ JavaScript การแสดงออกของ AngularJS สามารถเขียนได้ใน HTML
ซึ่งแตกต่างจากการแสดงออกของ JavaScript นิพจน์ AngularJS ไม่สนับสนุนการตัดสินแบบมีเงื่อนไขลูปและข้อยกเว้น
ซึ่งแตกต่างจากนิพจน์ JavaScript นิพจน์ AngularJS สนับสนุนตัวกรอง
ข้างต้นเป็นการรวบรวมวัสดุการแสดงออกของ AngularJS เราจะเพิ่มพวกเขาต่อไปในภายหลัง ฉันหวังว่ามันจะช่วยเรียนรู้ AngularJS เพื่อนร่วมชั้น