กรอง AngularJS
ฟิลเตอร์สามารถใช้ตัวอักษรท่อ (|) เพื่อเพิ่มการแสดงออกและคำแนะนำ
กรอง AngularJS
กรอง AngularJS สามารถใช้ในการแปลงข้อมูล:
| กรอง | ลักษณะ |
|---|---|
| เงินตรา | หมายเลขรูปแบบการจัดรูปแบบเป็นสกุลเงิน |
| กรอง | เลือกชุดย่อยของรายการจากอาร์เรย์ |
| ตัวพิมพ์เล็ก | สตริงรูปแบบตัวพิมพ์เล็ก |
| orderBy | จัดอาร์เรย์ตามการแสดงออก |
| ตัวพิมพ์ใหญ่ | สตริงรูปแบบตัวพิมพ์ใหญ่ |
เพิ่มนิพจน์ตัวกรอง
กรองผ่านตัวละครท่อ (|) และตัวกรองจะถูกเพิ่มในการแสดงออก .
((สองตัวอย่างด้านล่างเราจะใช้ส่วนก่อนหน้านี้กล่าวถึงการควบคุมคน))
สตริงกรองตัวพิมพ์ใหญ่จัดรูปแบบเป็นตัวพิมพ์ใหญ่:
AngularJS ตัวอย่าง
<div NG-App = "MyApp " NG-ควบคุม = "personCtrl">
<p> ชื่อนามสกุล {{| พิมพ์ใหญ่}} < / p>
</ div>
<p> ชื่อนามสกุล {{| พิมพ์ใหญ่}} < / p>
</ div>
ลอง»
กรองตัวพิมพ์เล็กเพื่อจัดรูปแบบสตริงตัวพิมพ์เล็ก:
AngularJS ตัวอย่าง
<div NG-App = "MyApp " NG-ควบคุม = "personCtrl">
<p> ชื่อนามสกุล {{| พิมพ์เล็ก}} < / p>
</ div>
<p> ชื่อนามสกุล {{| พิมพ์เล็ก}} < / p>
</ div>
ลอง»
กรองสกุลเงิน
สกุลเงินดิจิตอลตัวกรองจะได้รับการจัดรูปแบบเป็นรูปแบบสกุลเงิน:
AngularJS ตัวอย่าง
<div NG-App = "MyApp " NG-ควบคุม = "costCtrl">
<ประเภทขาเข้า = "จำนวน" NG -model = "ปริมาณ">
<ประเภทขาเข้า = "จำนวน" NG -model = "ราคา">
<p> ราคารวม = {{(Quantity * ราคา) | สกุลเงิน}} </ p>
</ div>
<ประเภทขาเข้า = "จำนวน" NG -model = "ปริมาณ">
<ประเภทขาเข้า = "จำนวน" NG -model = "ราคา">
<p> ราคารวม = {{(Quantity * ราคา) | สกุลเงิน}} </ p>
</ div>
ลอง»
เพิ่มตัวกรองเพื่อการเรียนการสอน
กรองผ่านตัวละครท่อ (|) และตัวกรองจะถูกเพิ่มคำสั่ง
orderBy จัดกรองอาร์เรย์ตามสำนวนที่ว่า:
AngularJS ตัวอย่าง
<div NG-App = "MyApp " NG-ควบคุม = "namesCtrl">
<ul>
<li NG-ซ้ำ = "x ชื่อ | orderBy: 'ประเทศ'">
{{X.name + ',' + x.country}}
</ li>
</ ul>
<div>
<ul>
<li NG-ซ้ำ = "x ชื่อ | orderBy: 'ประเทศ'">
{{X.name + ',' + x.country}}
</ li>
</ ul>
<div>
ลอง»
การป้อนข้อมูลกรอง
กรองขาเข้าผ่านตัวละครท่อ (|) และตัวกรองจะถูกเพิ่มเข้าไปสั่งกรองตามลำไส้ใหญ่และชื่อรุ่น
ฟิลเตอร์กรองเลือกกลุ่มย่อยจากแถวนี้:
AngularJS ตัวอย่าง
<div NG-App = "MyApp " NG-ควบคุม = "namesCtrl">
<p> <ประเภทขาเข้า = " ข้อความ" NG-รุ่น = "ทดสอบ"> </ p>
<ul>
<li NG-ซ้ำ = "x ชื่อ | กรอง: การทดสอบ | orderBy: 'ประเทศ'">
{{(X.name | พิมพ์ใหญ่) + ',' + x.country}}
</ li>
</ ul>
</ div>
<p> <ประเภทขาเข้า = " ข้อความ" NG-รุ่น = "ทดสอบ"> </ p>
<ul>
<li NG-ซ้ำ = "x ชื่อ | กรอง: การทดสอบ | orderBy: 'ประเทศ'">
{{(X.name | พิมพ์ใหญ่) + ',' + x.country}}
</ li>
</ ul>
</ div>
ลอง»