ฉันได้เรียนรู้เกี่ยวกับการใช้ AngularJs มาก่อนดังนั้นฉันจะเขียนโปรแกรมเล็ก ๆ เพื่อใช้ฟังก์ชั่นการกรองและเรียงลำดับแบบสอบถาม
คุณสามารถเรียนรู้จากโปรแกรมนี้:
1 ตัวกรอง AngularJS
2 วิธีใช้ NG-repeat
3. การใช้คอนโทรลเลอร์
4 ข้อมูลที่มีผลผูกพัน
การวิเคราะห์การเขียนโปรแกรม
ก่อนอื่นหากคุณต้องการสอบถามตัวกรองก่อนคุณต้องใช้ตัวกรองตัวกรองใน AngularJS
ใช้อักขระคำสั่ง PIPELINE | หลังจากนิพจน์โดยตรงและทำตามวิธีการเขียนต่อไปนี้เพื่อให้ได้เอฟเฟกต์การกรอง:
{{บุคคล | ตัวกรอง: แบบสอบถาม}}
ด้วยการใช้ตัวกรองเพื่อใช้การกรองการสืบค้นคือสตริงที่ป้อนเมื่อสอบถามการกรอง
ในทำนองเดียวกันฟังก์ชั่นการเรียงลำดับสามารถทำได้โดยใช้ orderby:
{{บุคคล | ตัวกรอง: คำถาม | orderby: order}}
แบบสอบถามและการเรียงลำดับข้างต้นเกี่ยวข้องกับตัวแปรสองตัวสืบค้นและคำสั่งซื้อ ที่นี่คุณสามารถใช้ NG-Model โดยตรงเพื่อใช้งานการเชื่อมโยงข้อมูล:
ค้นหา: <อินพุต ng-model = "query"> เรียงลำดับโดย: <เลือก ng-model = "order"> <ตัวเลือกค่า = "ชื่อ"> ชื่อ </ตัวเลือก> <ตัวเลือกค่า = "อายุ"> อายุ </opture> </select>
AngularJS เป็นภาษาเฟรมเวิร์กตาม DOM ดังนั้นจึงไม่จำเป็นต้องใช้ผู้ฟังและทริกเกอร์เหตุการณ์ใด ๆ เมื่อมีการเปลี่ยนแปลงใด ๆ ในกล่องอินพุตที่มีการสืบค้นกล่องอินพุตและนิพจน์ต่อไปนี้จะถูกเรียกให้รีเฟรชกล่องอินพุตและนิพจน์ต่อไปนี้!
เมื่อเทียบกับเฟรมเวิร์กอื่น ๆ มันจะถูกเพิ่มเข้าไปใน DOM ผ่าน DOM Node InnerHTML ตามสตริง การใช้งานของ AngularJS ช่วยเร่งการแสดงผลของแบบจำลองและมุมมอง นอกจากนี้ยังช่วยลดการเขียนรหัสเช่นผู้ฟังที่ไม่จำเป็นและทริกเกอร์และบรรลุเอฟเฟกต์เหมือนฤดูใบไม้ผลิอย่างแท้จริง ~
การนำเสนอข้อมูลสามารถทำได้ผ่าน NG-repeat เมื่อหน้าเว็บแยกวิเคราะห์ NG-Repeat แท็กจะถูกโคลนสำหรับแต่ละองค์ประกอบในอาร์เรย์สำหรับการรวบรวมและการแยกวิเคราะห์
<ul> <li ng-repeat = "บุคคลในบุคคล | ตัวกรอง: คำถาม | orderby: order"> {{person.name}} {{person.age}} </li> </ul>ส่วนที่เหลือของงานคือการเริ่มต้นอาร์เรย์ perons ในสคริปต์:
<div ng-controller = "ctl"> ... </div> <script type = "text/javascript"> ฟังก์ชั่น ctl ($ scope) {$ scope.persons = [{"ชื่อ": "Xingoo", "อายุ": 25}, {"ชื่อ": "Zhangsan" {"ชื่อ": "Wangwu", "อายุ": 30}]; $ scope.order = "อายุ"; } </script>รหัสและผลลัพธ์
ในที่สุดรหัสทั้งหมดจะโพสต์:
<! doctype html> <html ng-app> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <script src = "http://apps.bdimg.com/libs/angular.js/ </head> <body> <div ng-controller = "ctl"> การค้นหา: <อินพุต ng-model = "query"> เรียงลำดับโดย: <เลือก ng-model = "order"> <ตัวเลือกค่า = "ชื่อ"> ชื่อ </ตัวเลือก> <ตัวเลือกค่า = "อายุ"> อายุ </ตัวเลือก> {{person.name}} {{person.age}} </li> </ul> </div> <script type = "text/javascript"> ฟังก์ชั่น ctl ($ scope) {$ scope.persons = [{"ชื่อ": "Xingoo", "อายุ": 25} {"ชื่อ": "lisi", "อายุ": 20}, {"ชื่อ": "Wangwu", "อายุ": 30}]; $ scope.order = "อายุ"; } </script> </body> </html>ใช้ผลลัพธ์:
โดยค่าเริ่มต้นให้ใช้อายุในการเรียงลำดับ:
โดยการเลือกคุณสามารถใช้การเรียงชื่อชื่อ
เมื่อป้อนอักขระตัวเลือกบางตัวจะถูกกรองผ่านแบบสอบถามโดยอัตโนมัติ
ข้างต้นคือการเรียงลำดับข้อมูลสำหรับการกรองและการเรียงลำดับ AngularJS เราจะยังคงเพิ่มข้อมูลที่เกี่ยวข้องในอนาคต ขอบคุณสำหรับการสนับสนุนเว็บไซต์นี้!