การใช้ Filters ใน AngularJS

Filters คือการจัดรูแบบและกรองการแสดงผลของ AngularJS ซึ่งในตัว AngularJS ได้จัดเตรียมไว้หลายตัวด้วยกัน นอกจากของ AngularJS แล้วยังมี AngularJS Filter Plugin อื่นๆที่สามารถใช้ได้ แต่ยังไม่กล่าวถึงในบทความนี้นะครับ งั้นลองมาดูตัอย่าง AngularJS Filters กันครับ

• uppercase : ใช้สำหรับทำให้ข้อความเป็นตัวใหญ่.
• lowercase :  ใช้สำหรับทำให้ข้อความเป็นตัวเล็ก
• currency : ใช้สำหรับใส่สัญลักษณ์เงินตรา
• filter :  ใช้สำหรับกรองข้อมูล
• orderby :  ใช้สำหรับเรียงลำดับข้อมูล

รูปแบบการใช้งาน

// uppercase
Name in Upper Case: {{student.fullName() | uppercase}}

// lowercase
Name in Upper Case: {{student.fullName() | lowercase}}

// currency
fees: {{student.fees | currency}}

// filter


     {{ subject.name + ', marks:' + subject.marks }}
  

// orderBy


     {{ subject.name + ', marks:' + subject.marks }}
  

ตัวอย่างการใช้งาน

AngularJS Sample Application


      


            
Enter first name:
            

         

            
Enter last name: 
            

         

            
Enter fees: 
            

         

            
Enter subject: 
            

         

   

      


            
Name in Upper Case: 
            
{{student.fullName() | uppercase}}
         

            
Name in Lower Case: 
            
{{student.fullName() | lowercase}}
         

            
fees: 
            
{{student.fees | currency}}
         

            
Subject:
            

{{ subject.name + ', marks:' + subject.marks }}


         

   

ผลลัพธ์

About Nop

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.