AngularJS Filters สามารถเพิ่มไปใน Expression เพื่อนำไปใช้เปลี่ยนแปลงข้อมูล โดย Expression ก็คือเครื่องหมาย {{ }} นั่นเอง
Filter สามารถแบ่งการใช้งานได้ ดังนี้
- currency เป็นการใส่สัญลักษณ์ $
- filter เป็นการกรองข้อมูล โดยเลือกข้อมูลใน array จากค่าที่กำหนด
- lowercase คือการแปลงเป็นตัวอักษรพิมพ์เล็ก
- uppercase คือการแปลงเป็นตัวอักษรพิมพ์ใหญ่
- orderBy คือการจัดเรียงข้อมูลใน array จากน้อยไปมาก
ตัวอย่าง
<!DOCTYPE html>
<html ng-app="">
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>
</head>
<body ng-controller="control">
<div ng-init="phone=[
{brand:'iPhone4',os:'iOS'},
{brand:'Samsung',os:'Android'},
{brand:'Acer',os:'Android'},
{brand:'Huawei',os:'fireFoxOS'}]">
<input type="text" ng-model="name">
<p>Your name in uppercase is '{{ name | uppercase }}'</p>
<p>Your name in lowercase is '{{ name | lowercase}}'</p>
<p>Your money {{ 20 | currency }} </p>
<hr>
Your mobile phone :<input type="text" ng-model="mobile">
<p data-ng-repeat="x in phone | filter:mobile | orderBy: 'os'">
{{ x.brand + ' : ' + x.os}}
</p>
</div>
<script>
function control($scope){
$scope.name="Jame"
}
</script>
</body>
</html>
จากตัวอย่าง อธิบายได้ดังนี้
- มีการสร้าง Controller ที่ชื่อ control เพื่อเรียกใช้งาน function control
- มีการประกาศข้อมูลเริ่มต้นด้วย ng-init ชื่อ phone โดยข้อมูลมีลักษณะเป็น Array Object
- มีการกำหนดค่า Default ให้กับ <input> ใน model ที่ชื่อ name
- นำค่าที่ป้อนใน <input> ที่ model ชื่อ name ไปแปลง เป็นตัวพิมพ์ใหญ่ และพิมพ์เล็กตามลำดับ
- กำหนด $ ให้กับ 20
- มีการวนลูปเพื่อแสดงผลข้อมูลใน array ที่ชื่อ phone โดยเรียงตาม os
- มีการกำหนดให้นำค่าจาก <input> ที่ใช้ model ชื่อ mobile มาเลือกข้อมูลใน array ที่ชื่อ phone เพื่อนำไปแสดงผล โดยการเลือกนั้น ไม่ได้เฉพาะเจาะจงไปที่ brand หรือ os
ผลลัพธ์
ไม่มีความคิดเห็น:
แสดงความคิดเห็น