$parsers $formatters ความสามารถ ที่ซ่อนอยู่ของ Angular…

เรื่องมันมีอยู่ว่า ระบบ ที่ทำงาน ต้องการเก็บ จำนวนเวลาเป็นชั่วโมง

แต่ต้องการแสดงในระบบเป็น วัน ………

แสดงข้อมูลเฉยๆง่ายๆชิลๆ ก็

Ticket validity = {{ hour/24 }} Day

จบบบบบ

แต่ความซวยบังเกิด เมื่อ เราต้องทำForm input ให้ สามารถแก้จำนวนวันได้นี่ซิ
เพราะค่าที่ได้ จาก server เป็นชั่วโมง แต่ต้อง เปลี่ยนให้โชวเป็นวัน แล้ว เวลากรอกวันก็ต้องเปลี่ยน กลับ เป็นชั่วโมงเพื่อให้ส่งกลับไป ให้ถูกต้อง code แม่มก็จะยาวมวากๆ

$http(...).success(function(hour){

$scope.validity = hour/24;

});

$scope.onSubmit = function (validity){

   var hour = validity*24;

 // send to server bla bla

}

อ้าวก็ไม่ยาวมากนิ เพิ่มนิดหน่อยเอง แค่หารๆคูณๆ หึหึ นี่ถ้ามีแค่ค่าเดียว ลองนึกว่า มีค่าแบบนี้ยัดใน json object ซัก 4–5 ตัวซิ แล้ว เราต้องจัดการซัก 4–5 object ที่อยู่ใน list หละโค้ดก็จะเริ่มเยอะขึ้นๆ มันน่าจะมีวิธีที่ กว่านี้นะ !!

$parsers $formatters เนี่ยแหละ จะเข้ามาช่วยเราวะห้าๆๆ ไอ้สองตัวนี้มันเป็น feature ที่ดีมากๆเลยนะ แต่ ซ่อนอยู่ในมุมหลืบของ Angular doc T^T

เอาโค้ดไปกันดูก่อน เลย

http://jsfiddle.net/MuMoo/9v7fo3Lp/

อธิบายก็คือไอ2ตัวนี้มันเป็น array attribute ใน ngModelController
ที่เอาไว้ใส่ function เพื่อ ทำหน้า ที่ตามชื่อ นั่นแหละ parseและ format value โดยเมื่อค่าใน DOM เปลี่ยน เช่น user ใส่เลข 2 Angular ก็จะวนลูป function ใน
array $parsers แล้ว pass ค่า 2เข้าไปในแต่ละ function เพื่อ parse value

ในที่นี้เรา push function ที่ * 24 กับ value ที่รับมา 2*24 = 48

กลับกัน ถ้าเราเปลี่ยน ค่า ใน controller เป็น 24

Angular ก็ทำ step เดิม กับ array $formatters แต่จะวนลูปจาก หลังมาหน้า นะ

และเราก็ push function ที่ / 24 ไว้ 24/24 ก็กลายเป็น 1 กลับไปแสดงค่า ใน input

แค่นี้เองลด code ไปได้เยอะเลยยยย ><