จัดเรียงข้อมูลในตาราง แบบยูสเซอร์สามารถเลือกได้

ในโค้ดด้านล่าง จะมีรายการ product แสดงอยู่ในตาราง และมี dropdown list ตัวหนึ่งให้ยูสเซอร์เลือกว่าจะจัดเรียงข้อมูลจากราคามากไปหาน้อยหรือน้อยไปหามาก

หน้าตาเป็นอย่างนี้

สิ่งที่สำคัญๆในโค้ดคือ

หนึ่งเลยสร้างตัวแปรเก็บคำว่า price ไว้เพื่อจะเอาไปใช้กับคำสั่ง orderBy ให้มันจัดเรียงข้อมูลด้วยฟิลด์ price

ถัดมาเป็น dropdown list สังเกตที่คำว่า ng-model ให้ผูกเข้ากับตัวแปร sort เมื่อยูสเซอร์เลือกตัวเลือกใดๆ มันก็จะเอา price, -price ไปเก็บ

ตอนที่เราวนลูปเพื่อเอาข้อมูลจากตัวแปร products ออกมาแสดง เราใช้ | orderBy: sort เข้ามาร่วมด้วย เป็นการบอกว่าให้จัดเรียงตามค่าที่อยู่ในตัวแปร sort ทีนี้ถ้าหากว่าตัวแปร sort เก็บ price ไว้มันก็จะจัดเรียงตามราคาจากน้อยไปหามาก ถ้าหากในตัวแปร sort เก็บ -price ไว้มันก็จะจัดเรียงตามราคาจากมากไปหาน้อย

ไม่ยากเนอะ