ตัวกรอง AngularJS
ตัวกรองสามารถเพิ่มลงในนิพจน์และคำสั่งโดยใช้อักขระท่อ (|)
ตัวกรอง AngularJS
ตัวกรอง AngularJS สามารถใช้ในการแปลงข้อมูล:
| กรอง | อธิบาย |
|---|---|
| สกุลเงิน | รูปแบบตัวเลขในรูปแบบสกุลเงิน |
| กรอง | เลือกชุดย่อยจากรายการอาร์เรย์ |
| ตัวพิมพ์เล็ก | สตริงรูปแบบเป็นตัวพิมพ์เล็ก |
| โดยสั่งซื้อ | จัดเรียงอาร์เรย์ตามนิพจน์ |
| ตัวพิมพ์ใหญ่ | สตริงที่จัดรูปแบบเป็นตัวพิมพ์ใหญ่ |
เพิ่มตัวกรองในนิพจน์
ตัวกรองสามารถเพิ่มเข้าไปในนิพจน์ผ่านอักขระท่อ (|) และตัวกรอง -
((ในสองตัวอย่างต่อไปนี้เราจะใช้ตัวควบคุมบุคคลที่กล่าวถึงในบทก่อนหน้า))
ตัวกรองตัวพิมพ์ใหญ่จะจัดรูปแบบสตริงเป็นตัวพิมพ์ใหญ่:
อินสแตนซ์ Angularjs
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" ng-controller = "personctrl"> <p> ชื่อคือ {{LastName | uppercase}} </p> </div> <script src = "personcontroller.js"> </script> </body> </html>ผลการทำงาน:
ชื่อ DOE
ตัวกรองตัวพิมพ์เล็กจัดรูปแบบสตริงเป็นตัวพิมพ์เล็ก:
อินสแตนซ์ Angularjs
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" ng-controller = "personctrl"> <p> ชื่อคือ {{LastName | ตัวพิมพ์เล็ก}} </p> </div> <script src = "personcontroller.js"> </script> </body> </html>ผลการทำงาน:
ชื่อ DOE
ตัวกรองสกุลเงิน
ตัวกรองสกุลเงินกำหนดตัวเลขเป็นรูปแบบสกุลเงิน:
อินสแตนซ์ Angularjs
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" ng-controller = "costctrl"> ปริมาณ: <อินพุต type = "number" ng-model = "ปริมาณ"> ราคา: <อินพุต type = "number" ng-model = "ราคา"> <p> ราคารวม = {{(ราคา * ราคา) | สกุลเงิน}} </p> </div> <script> var app = angular.module ('myapp', []); app.controller ('costctrl', ฟังก์ชั่น ($ scope) {$ scope.quantity = 1; $ scope.price = 9.99;});ผลการทำงาน:
ปริมาณ: ราคา:
ราคารวม = $ 9.99
เพิ่มตัวกรองลงในคำสั่ง
ตัวกรองสามารถเพิ่มลงในคำสั่งผ่านอักขระท่อ (|) และตัวกรอง
ตัวกรองสั่งซื้อจัดเรียงอาร์เรย์ตามนิพจน์:
อินสแตนซ์ Angularjs
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" ng-controller = "namesctrl"> <p> object: </p> <ul> <li ng-repeat = "x ในชื่อ | orderby: 'ประเทศ'"> {{x.name + ',' + x.country}} </li> src = "namescontroller.js"> </script> </body> </html>ผลการทำงาน:
Loop Object:
อินพุตตัวกรอง
ตัวกรองอินพุตสามารถเพิ่มลงในคำสั่งโดยอักขระท่อ (|) และตัวกรองตามด้วยลำไส้ใหญ่และชื่อรุ่น
ตัวกรองตัวกรองเลือกชุดย่อยจากอาร์เรย์:
อินสแตนซ์ Angularjs
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" ng-controller = "namesctrl"> <p> การกรองอินพุต: </p> <p> <อินพุตประเภท = "ข้อความ" ng-model = "ทดสอบ"> </p> <ul> <li ng-repeat = "x ในชื่อ | ฟิลเตอร์: ทดสอบ </li></ul> </div> <script src = "namescontroller.js"> </script> </body> </html>
เอฟเฟกต์การทำงาน:
การกรองอินพุต:
ข้างต้นเป็นบทสรุปของความรู้เกี่ยวกับตัวกรอง AngularJS เราจะเพิ่มพวกเขาต่อไปในภายหลัง เพื่อนที่ต้องการมันสามารถอ้างถึงมันได้