ไฟล์ app.js
(function(){
app =
angular.module('myapp',[]);
app.controller('Registration',function(){
this.country=['England','U.S.A','Thailand','France','Canada'];
this.sexs=['male','female'];
this.myArr=[];
this.val={};
this.addMember=function(){
this.myArr.push(this.val);
this.val={};
};
});
})();
อธิบาย :
- สร้าง module ชื่อ myapp
- สร้าง controller ชื่อ Registration โดยประกอบ
- ตัวแปร country มี type เป็น Array เก็บชื่อประเทศ เพื่อนำไปแสดงใน dropdown list
- ตัวแปร sex มี type เป็น Array เก็บเพศ เพื่อนำไปแสดงใน radio button
- ตัวแปร myArr มี type เป็น Array ประกาศให้เป็นค่าว่าง ใช้สำหรับเก็บ object ที่รับจาก form
- ตัวแปร val มี type เป็น Object ใช้เก็บข้อมูลแต่ละ input ผ่าน form
- ฟังก์ชั่น addMember ทำหน้าที่เพิ่มข้อมูลไปเก็บไว้ myArr จากนั้นทำการเคลียร์ค่า Object val
ไฟล์ bookstore.html
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>
<script type="text/javascript"
src="app.js"></script>
</head>
<body>
<div class="container-fluid"
ng-controller="Registration as regist">
<div class="row">
<div
class="col-md-12">
<form
name="member" ng-submit="regist.addMember()">
Firstname
<input type="text" ng-model="regist.val.firstname"
/><br><br>
Lastname
<input type="text" ng-model="regist.val.lastname"
/><br><br>
Country
<select
ng-model="regist.val.country">
<option
ng-repeat="mycountry in regist.country"
value="{{mycountry}}">{{mycountry}}</option>
</select>
<p>Sex</p>
<p
ng-repeat="mysex in regist.sexs">
<input
type="radio" name="sex"
ng-model="regist.val.sex"
value="{{mysex}}" />{{mysex}}
</p>
<input
type="submit" value="submit">
</form>
</div>
</div>
<div class="row">
<div
class="col-md-12">
<p
ng-repeat="myname in regist.myArr">
Firstname
:{{myname.firstname}} <br>
Lastname : {{
myname.lastname }} <br>
Sex :
{{myname.sex}}<br>
Country :
{{myname.country}}
</p>
</div>
</div>
</div>
</body>
</html>
- เรียกใช้ module ด้วย ng-app="myapp"
- เรียกใช้ controller ด้วย ng-controller="Registration as regist" โดยกำหนด Alias เป็น regist
- Directive ng-submit ใน <form..> จะเรียกใช้ฟังก์ชั่น addMember() เมื่อกดปุ่ม submit
- ข้อมูลของการ submit 1 ครั้ง ng-model ของแต่ละ <input> จะทำการเก็บค่าเข้าไปใน Attribute แต่ละตัว ของตัวแปร val ที่มีการอ้างอิงใน ng-model โดยข้อมูลถูกเก็บในลักษณะ key:value เมื่อนำหลายๆ Attribute มารวมกันจึงเป็น 1 Object จากนั้นนำ Object ไปเก็บไว้ในตัวแปรประเภท Array เพื่อเรียกใช้งานครั้งต่อไป
- Directive ng-model ใน input tag ต่างๆ ใช้เก็บค่าที่ได้จากการป้อนข้อมูลลงไปใน Attribute ที่อ้างอิง
- Dropdown list และ Radio button เรียก Directive ng-repeat เพื่อวนลูปดึงข้อมูลที่เก็บใน Country[] และ Sex[] มาแสดง
- <p ng-repeat="myname in regist.myArr"> เป็นการวนลูปดึงสมาชิกที่อยู่ใน myArr ซึ่งก็คือ Object แต่ละตัวออกมา โดยการแสดงผล ให้ระบุ Attribute ด้วย เช่น .firstname, .lastname เป็นต้น การเก็บฟอร์มไว้ใน Array จะทำให้ทุกๆ ฟอร์มที่กรอกถูกเก็บไว้ และสามารถนำมาแสดงผล หรือใช้งานอย่างอื่นได้
ผลลัพธ์
ก่อน submit
Form
หลัง submit Form
ไม่มีความคิดเห็น:
แสดงความคิดเห็น