การสาธิต
นี่คือตัวอย่างตัวอย่างทั้งหมด
1. ไฟล์ filter.js
Angular.Module ("ExampleApp", []). ค่าคงที่ ("ProductsUrl", "http: // localhost:/products"). controller ("defaultctrl", ฟังก์ชั่น ($ scope, $ http, productsurl) {$ http.get อาร์เรย์});});ที่นี่ฉันใช้บริการที่แนะนำเป็นค่าคงที่และข้อดีของการเขียนนี่คือฉันสามารถแก้ไขได้อย่างง่ายดาย
สำหรับวิธีใช้บริการ $ http โปรดดูที่ AngularJs (III) ของฉันที่ปรับใช้
<! doctype html> <html xmlns = "http://www.w.org//xhtml" ng-app = "ExampleApp"> <head> <meta http-equiv = "content-type" content-type "text/html; src = "angular.js"> </script> <link href = "bootstrap-theme.css" rel = "stylesheet"/> <link href = "bootstrap.css" rel = "stylesheet"/> <script src = "filter.js" > <div> <div> <h> ผลิตภัณฑ์ </h> </div> <table> <thead> <tr> <td> ชื่อ </td> <td> หมวดหมู่ </td> <td> ราคา </td> <td> Expiry </td> </tr> uppercase}} </td> <td> {{item.category}} </td> <td> {{item.price | สกุลเงิน}} </td> <td> {{item.expiRy | หมายเลข}} </td> <td> {{item | json}} </td> </tr> </tbody> </table> </div> </body> </html>ผลลัพธ์ของการรัน:
ใช้ตัวกรอง
ตัวกรองแบ่งออกเป็นสองประเภท:
1. การกรองข้อมูลส่วนบุคคล
2. ทำงานในชุด
1. มันค่อนข้างง่ายในการใช้งานข้อมูล ดังที่แสดงในการสาธิตสามารถจัดรูปแบบใน {{item | สกุลเงิน}} ฯลฯ
สกุลเงิน: "F" สามารถเป็นราคาที่กรองเป็นปอนด์
ตัวกรองข้อมูลเดียวต้องการกรองรูปแบบข้อมูลหลังจากตัวกรอง: ในอักขระรูปแบบที่สอดคล้องกัน
หมายเลข: แสดงถึงตำแหน่งทศนิยมข้อมูลที่สงวนไว้
2: การกรองคอลเลกชัน การกรองตัวเลขที่แน่นอนจากคอลเลกชัน
ในการสาธิตขั้นพื้นฐานฉันเพิ่มสิ่งนี้:
<div> <h> ผลิตภัณฑ์ </h> </div> <div> ขีด จำกัด : <เลือก ng-model = "limitValue" ng-options = "P สำหรับ p ใน LimitRange"> </Select> </div> ตัวกรองได้รับการเพิ่ม: $ http.get (ผลิตภัณฑ์ $ scope.limitValue = ""; // ถ้ามันเป็นสตริง <span style = "พื้นหลังสี: rgb (,,);"> $ scope.limitRange = []; สำหรับ (var i =; i <= $ scope.products.length; ); ">} </span> </span>}); <tr ng-repeat = "รายการในผลิตภัณฑ์ | Limitto: LimitValue"> <td> {{item.name | uppercase}} </td> <td> {{item.category}} </td> <td> {{item.price | สกุลเงิน}} </td> <td> {{item.expiRy | หมายเลข}} </td> <td> {{item | json}} </td> </tr> <span style = "line-height:.เมื่อเขียนฟังก์ชั่นคุณจะต้องเขียนประสบความสำเร็จเพราะข้อมูล JSON ได้รับแบบอะซิงโครนัส
ผลลัพธ์:
ขีด จำกัด : คุณสามารถปรับจำนวนที่แสดงบนหน้า
สร้างตัวกรอง
AngularJS มีตัวกรองสองตัว ก่อนอื่นเราสามารถสร้างตัวกรองที่จัดรูปแบบข้อมูลส่วนบุคคลเช่น: สตริงเอาท์พุทตัวอักษรตัวพิมพ์ใหญ่ตัวอักษรตัวแรก
ก่อนอื่นพูดคุยเกี่ยวกับวิธีการกำหนดตัวกรอง: ตัวกรองถูกสร้างขึ้นผ่านโมดูลฟิลเตอร์และรูปแบบทั่วไปของการสร้างคือ:
Angular.Module ("ExampleApp") // หมายถึงการได้รับโมดูล ตัวกรองถูกสร้างขึ้นภายใต้โมดูล
.filter ("labelcase", function () {// รับพารามิเตอร์สองพารามิเตอร์พารามิเตอร์แรกแสดงชื่อของตัวกรองและที่สองเป็นฟังก์ชันโรงงาน
ฟังก์ชั่นการส่งคืน (ค่า, ย้อนกลับ) {// ส่งคืนฟังก์ชั่นผู้ปฏิบัติงานเพื่อกรองกระบวนการกรองที่สอดคล้องกัน พารามิเตอร์แรกระบุวัตถุที่ต้องจัดรูปแบบและพารามิเตอร์ที่สองระบุการกำหนดค่าและรูปแบบที่จะติดตาม
ถ้า (Angular.issTring (value)) {var intermediate = ย้อนกลับ? value.touppercase (): value.toLowerCase (); return (reverse? intermediate []. toLowerCase (): intermediate []. touppercase () + intermediate.substr ());} else {return value;}}});ฉันเขียนสิ่งนี้ลงในไฟล์ JS CustomFilter.js อย่าลืมเพิ่ม
<link href = "bootstrap.css" rel = "stylesheet"/> <script src = "filter.js"> </script> <script src = "customfilter.js"> </script>
ตกลงตอนนี้ฉันจะเปลี่ยนข้อมูล:
<td> {{item.name | LABELCASE: True}} </td>ดังที่ได้กล่าวไว้ก่อนหน้านี้หากคุณต้องการเพิ่มข้อมูลการกำหนดค่ารูปแบบการเขียนคือตัวกรอง: ตัวเลือก
แน่นอนว่าพารามิเตอร์เริ่มต้นไม่สามารถเขียนได้และค่าเริ่มต้นจะได้รับ NULL หรือไม่ได้กำหนด
ผลลัพธ์:
มันเป็นเรื่องง่ายที่จะปรับแต่งฟังก์ชั่นตัวกรองสำหรับการประมวลผลแต่ละข้อมูล
2. ปรับแต่งฟังก์ชั่นที่ประมวลผลโดยคอลเลกชันเช่น Limitto
Angular.module ("ExampleApp"). ตัวกรอง ("labelcase", ฟังก์ชัน () {ฟังก์ชัน return (ค่า, ย้อนกลับ) {ถ้า (angular.isstring (value)) {var intermediate = reverse? value.touppercase () intermediate.substr ());} else {return value;}}}). ตัวกรอง ("skip", function () {ฟังก์ชั่นการส่งคืน (ข้อมูล, นับ) {ถ้า (angular.isarray (data) && angular.isnumber (นับ)) ข้อมูล;}}});ส่วนที่แก้ไข HTML:
<tr ng-repeat = "รายการในผลิตภัณฑ์ | ข้าม:">
ผลลัพธ์: มีข้อมูลทั้งหมดหกชิ้นและ 2 ชิ้นถูกส่งผ่านโดยใช้ตัวกรองข้าม
เมื่อปรับแต่งตัวกรองฉันพบว่ามีการกำหนดตัวกรองแล้ว ฉันไม่ต้องการนิยามซ้ำ ๆ ฉันควรทำอย่างไร? นอกจากนี้เรายังสามารถใช้ตัวกรองที่สร้างขึ้นเพื่อสร้าง
Angular.module ("ExampleApp"). ตัวกรอง ("labelcase", ฟังก์ชัน () {ฟังก์ชัน return (ค่า, ย้อนกลับ) {ถ้า (angular.isstring (value)) {var intermediate = reverse? value.touppercase () intermediate.substr ());} else {return value;}}}). ตัวกรอง ("skip", function () {ฟังก์ชั่นการส่งคืน (ข้อมูล, นับ) {ถ้า (angular.isarray (data) && angular.isnumber (นับ)) data;}}}). ตัวกรอง ("ใช้", ฟังก์ชั่น ($ filter) {// คุณจะเห็นว่าฉันอ้างอิงบริการในตัวของ AngularJs ในฟังก์ชั่นโรงงานฟังก์ชั่นการส่งคืน (ข้อมูล, skipcount, takecount) {// คุณสามารถดูได้หรือไม่ การเขียนโปรแกรม$ filter ('skip') เรียกตัวกรองข้ามเพราะมันส่งคืนฟังก์ชั่นดังนั้นเราจึงสามารถส่งต่อพารามิเตอร์ต่อไปได้
<tr ng-repeat = "รายการในผลิตภัณฑ์ | Take ::">
ผลลัพธ์:
นั่นเป็นวิธีที่ตัวกรองเสร็จสิ้น มันไม่ง่ายมากเหรอ?