การแยกการใช้ตัวกรองใน AngularJS ให้เสร็จสมบูรณ์

ในโลกของ AngularJS ตัวกรองให้วิธีการจัดรูปแบบข้อมูล Angular ยังช่วยให้เรามีตัวกรองในตัวมากมายและมันก็ค่อนข้างง่ายในการสร้างตัวกรองที่กำหนดเอง

ในการเชื่อมโยงเทมเพลต HTML {{}} เราใช้ | เพื่อเรียกตัวกรอง ตัวอย่างเช่นเราต้องการให้สตริงแสดงอักขระทุนทั้งหมด:

 {{ชื่อ | ตัวพิมพ์ใหญ่}}

แน่นอนว่าเรายังสามารถใช้บริการ $ Filter ใน JavaScript เพื่อเรียกตัวกรองและใช้การใช้ตัวอักษรสตริงเป็นตัวอย่าง:

 app.controller ('democontroller', ['$ scope', '$ filter', ฟังก์ชั่น ($ scope, $ filter) {$ scope.name = $ filter ('ตัวพิมพ์เล็ก') ('ari');}]);

จะผ่านพารามิเตอร์ไปกรองได้อย่างไร? เพียงแค่ใส่พารามิเตอร์หลังจากตัวกรองและเพิ่มลำไส้ใหญ่ตรงกลาง (หากมีพารามิเตอร์หลายตัวที่จะผ่านให้เพิ่มลำไส้ใหญ่หลังจากแต่ละพารามิเตอร์) ตัวอย่างเช่นตัวกรองตัวเลขสามารถช่วยเรา จำกัด จำนวนตัวเลข หากคุณต้องการแสดงทศนิยมสองตำแหน่งให้เพิ่มหมายเลข: 2

 {{123.456789 | หมายเลข: 2}}

ตัวกรองตัวกรองส่วนใหญ่จะใช้เพื่อกรองอาร์เรย์ของข้อมูลและส่งคืนอาร์เรย์ใหม่ที่มีข้อมูล subarray

ตัวอย่างเช่นเมื่อค้นหาทางฝั่งไคลเอ็นต์เราสามารถกรองผลลัพธ์ที่เราต้องการจากอาร์เรย์ได้อย่างรวดเร็ว

วิธีตัวกรองนี้ได้รับพารามิเตอร์สตริงวัตถุหรือฟังก์ชันเพื่อเลือก/ลบองค์ประกอบอาร์เรย์

มาดูกันอย่างละเอียด:

1. ตัวกรองในตัว

1, ตัวพิมพ์ใหญ่, การแปลงขนาดตัวพิมพ์เล็ก

 {{"Lower Cap String" | uppercase}} // ผลลัพธ์: Lower Cap String {{"Tank is Good" | ตัวพิมพ์เล็ก}} // ผลลัพธ์: ถังดี

｜ เส้นแนวตั้งที่นี่เป็นฟังก์ชันไปป์ไลน์ หากคุณคุ้นเคยกับ Linux ฟังก์ชั่นไปป์ไลน์ของส่วนนี้จะเหมือนกับ 2, JSON Formatted

 {{{foo: "bar", baz: 23} | json}} // ผลลัพธ์: {"foo": "bar", "baz": 23}

หมายเหตุ: BZA ไม่มีคำพูดสองเท่าก่อนการจัดรูปแบบและจะถูกแปลงเป็นข้อมูล JSON หลังจากการจัดรูปแบบ

3. การจัดรูปแบบวันที่

mysql timestamp ng-bind = "message.time * 1000 | วันที่: 'yyyy-mm-dd'"

 {{1304375948024 | วันที่: 'Medium'}} // 03 พฤษภาคม 2011 06:39:08 PM {{1304375948024 | วันที่}} // ผลลัพธ์: 3 พฤษภาคม 2011 {{1304375948024 | วันที่: "mm/dd/yyyy @ h: mma"}} // ผลลัพธ์: 05/03/2011 @ 6:39 am {{1304375948024 | วันที่: "yyyy-mm-dd hh: mm: ss"}} // ผลลัพธ์: 2011-05-03 06:39:08

4. การจัดรูปแบบตัวเลข

 {{1.234567 | หมายเลข: 1}} // ผลลัพธ์: 1.2 {{1234567 | หมายเลข}} // ผลลัพธ์: 1,234,567

5. การจัดรูปแบบสกุลเงินสกุลเงิน

 {{250 | สกุลเงิน}} // ผลลัพธ์: $ 250.00 {{250 | สกุลเงิน: "RMB ￥"}} // ผลลัพธ์: RMB ￥ 250.00

6. การค้นหาตัวกรองสามารถตรวจสอบค่าเท่านั้นไม่ใช่คีย์

 {{[{"อายุ": 20, "id": 10, "ชื่อ": "iphone"}, {"อายุ": 12, "id": 11, "ชื่อ": "sunm xing"}, {"อายุ": 44, "id": 12, "ชื่อ": "ทดสอบ abc"}] | ตัวกรอง: 's'}} // ค้นหาแถวด้วย S // ผลลัพธ์ของตัวอย่างข้างต้น: [{"อายุ": 12, "id": 11, "ชื่อ": "sunm xing"}, {"อายุ": 44, "id": 12, "ชื่อ": 12, "id": 11, "ชื่อ": "sunm xing"}, {"อายุ": 44, "id": 12, "ชื่อ": "ทดสอบ abc"}] | ตัวกรอง: {'ชื่อ': 'ip'}}} // ค้นหาบรรทัดของชื่อเช่น IP // ผลลัพธ์ของตัวอย่างข้างต้น: [{"อายุ": 20, "id": 10, "ชื่อ": "iPhone"}] $ filter ('หมายเลข') (30000, 2); var jsonstring = $ filter ('json') ({"อายุ": 12, "id": 11, "ชื่อ": "sunm xing"}, {"อายุ": 44, "id": 12, "ชื่อ": "ทดสอบ ABC"}])

7. สตริง Limitto, การสกัดกั้นวัตถุ

 {{"ฉันรักรถถัง" | Limitto: 6}} // ผลลัพธ์: ฉันรัก {{"ฉันรักรถถัง" | Limitto: -4}} // ผลลัพธ์: Tank {{[{"อายุ": 20, "id": 10, "name": "iphone"}, {"อายุ": 12, "id": 11, "ชื่อ": "sunm xing"}, {"อายุ": 44, "id": 12, " Limitto: 1}} // result: [{"อายุ": 20, "id": 10, "name": "iPhone"}]

8. การเรียงลำดับโดยการเรียงลำดับวัตถุ

 {{[{"อายุ": 20, "id": 10, "ชื่อ": "iphone"}, {"อายุ": 12, "id": 11, "ชื่อ": "sunm xing"}, {"อายุ": 44, "id": 12, "ชื่อ": "ทดสอบ abc"}] | orderby: 'id': true}} // rot id คำสั่งซื้อ {{[{"อายุ": 20, "id": 10, "ชื่อ": "iphone"}, {"อายุ": 12, "id": 11, "ชื่อ": "sunm xing"}, {"อายุ": 44, "id" orderby: 'id'}} // เรียงลำดับ {{[{"อายุ": 20, "id": 10, "ชื่อ": "iphone"}, {"อายุ": 12, "id": 11, "ชื่อ": "sunm xing"}, {"อายุ": 44, "id": 12, " orderby: ['-อายุ', 'ชื่อ']}}

2. ฟังก์ชั่นตัวกรองแบบกำหนดเอง

วิธีการปรับแต่งของตัวกรองนั้นง่ายมาก ใช้วิธีการกรองของโมดูลเพื่อส่งคืนฟังก์ชั่นที่ได้รับค่าอินพุตและส่งคืนผลลัพธ์ที่ประมวลผล

 app.filter ('ชื่อตัวกรอง', function () {return function (วัตถุที่ต้องกรอง, พารามิเตอร์ตัวกรอง 1, พารามิเตอร์ตัวกรอง 2, ... ) {//...do บางสิ่งกลับไปที่วัตถุที่ประมวลผล;}});

ฉันพบเฟรมเวิร์ก MVC พื้นฐาน, PhoneCat และตัวกรองที่กำหนดเองซึ่งเขียนบนพื้นฐานนี้ด้วย กรอบนี้มีประโยชน์มาก

filters.js เพิ่มโมดูล

 Angular.module ('tanktest', []). ตัวกรอง ('tankreplace', function () {return function (อินพุต) {return input.replace (/tank/, "======")};});

เรียกใน html

 {{"รถถังดี" | ตัวพิมพ์เล็ก | tankreplace}} // ผลลัพธ์: ===== เป็นสิ่งที่ดี

หมายเหตุ: | ตัวพิมพ์เล็ก คำสั่งไปป์ไลน์ Tankreplace สามารถมีได้หลายอย่าง

 YourApp.filter ('orderObjectby', function () {return function (รายการ, ฟิลด์, ย้อนกลับ) {var filtered = []; angular.foreach (รายการ, ฟังก์ชั่น (รายการ) {filtered.push (รายการ);}); filter.sort (ฟังก์ชั่น (a, b) {return กรอง. reverse ();

ตัวกรองนี้แปลงวัตถุเป็นอาร์เรย์มาตรฐานและเรียงลำดับตามฟิลด์ที่คุณระบุ คุณสามารถใช้ตัวกรอง OrderObjectBy เพื่อให้มีลักษณะคล้ายกับคำสั่งซื้อรวมถึงค่าบูลีนหลังจากชื่อฟิลด์ตามลำดับที่ระบุว่าควรกลับรายการหรือไม่ กล่าวอีกนัยหนึ่งของปลอมคือคำสั่งจากน้อยไปมากความเสื่อมโทรมที่แท้จริง การโทร html

 <li ng-repeat = "รายการในรายการ | orderObjectby: 'color': true"> {{item.color}} </li>

เรียงลำดับการค้นหา

 <อินพุต type = "text" ng-model = "search" placeholder = "search"> <thead> <tr> <!-ng-class = "{dropup: true}"-> <th ng-click = "change order ('id') 'id'} "> </span> </th> <th ng-click =" ChangeRorder ('ชื่อ') "ng-class =" {dropup: order === ''} "> ชื่อผลิตภัณฑ์ <span ng-class =" {orderColor: orderType === '} " order === ''} "> ราคาผลิตภัณฑ์ <span ng-class =" orderColor: orderType === 'ราคา'} "> </span> </th> </tr> </thead> <tbody> <ttr ng-repeat =" <td> {{item.name}} </td> <td> {{item.price | สกุลเงิน: '￥'}} </td> </tr> </tbody>

AngularJs

 // ฟิลด์การเรียงลำดับเริ่มต้น $ scope.orderType = 'id'; $ scope.order = '-'; $ scope.changeOrder = function (ประเภท) {console.log (ประเภท); $ scope.orderType = type; if ($ scope.order === '') {$ scope.order = '-'; } else {$ scope.order = ''; -