ตัวอย่าง
<!DOCTYPE html>
<html ng-app="">
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>
</head>
<body>
<div ng-controller="formController">
<form>
First Name:<br>
<input type="text" ng-model="person.firstName"><br>
Last Name:<br>
<input type="text" ng-model="person.lastName"><br><br>
<button ng-click="reset()">RESET</button>
</form>
</div>
<script>
function formController ($scope) {
$scope.default= {firstName:"", lastName:""};
$scope.reset = function() {
$scope.person= angular.copy($scope.default);
};
}
</script>
</body>
</html>
อธิบาย
- สร้าง controller ชื่อ formController จะถูกเรียกใช้งานเมื่อเข้าใช้ <form> โดยตัวแปร default เก็บ Object ที่ประกอบด้วย firstName และ lastName
- กำหนดให้ ตัวแปร reset เก็บฟังก์ชั่น ซึ่งภายในฟังก์ชั่น จะทำการ copy ข้อมูลจากตัวแปร default ไปไว้ใน person ซึ่งค่าใน default นั้น เป็น null
- ดึงค่าจากตัวแปร person มาแสดงใน <input> โดยใช้คำสั่ง person.firstName และ person.lastName ค่าที่ดึงมาจะเป็น null จึงเสมือนการเคลียร์ค่าใน <input>
โคตส่วนนี้
ตอบลบ$scope.person= angular.copy($scope.default);
ต่างจาก
$scope.person= $scope.default;
ยังไงหรอครับ
จากโค้ด $scope.person= $scope.default;
ลบเท่าที่ลองทำดู ไม่สามารถกำหนดค่าตามโค้ดดังกล่าวได้ อาจเป็นเพราะ $scope.person ต้องถูกกำหนดค่าด้วยตัวแปรประเภท object จึงต้องใช้คำสั่ง angular.copy แทน
ถ้าผิดพลาดประการใด ก็ขออภัยด้วยค่ะ
ความคิดเห็นนี้ถูกผู้เขียนลบ
ตอบลบ