สิ่งที่ควรรู้
การใช้งานฟอร์ม
จากบทที่แล้วได้พูดถึงแนวคิดแบบ Two-Way Binding ของ AngularJS เราจะทำให้คุณมองเห็นภาพนั้นมากขึ้นด้วย
ด้วย Ng-Model
Ng-Model คือ อะไร ?
Ng-Model เป็น Directive ที่ใช้เชื่อมโยงค่าระหว่าง model และ view ตามแนวคิด Two-Way Binding
โดยจะใส่ไว้ใน form control ต่างๆ
<input [type=*] ng-model="ชื่อตัวแปร" /> <select ng-model="ชื่อตัวแปร" />
ตัวอย่างของ Ng-Model สามารถดูได้ที่ลิงค์นี้ Demo
ไฟล์ demo.html
<!DOCTYPE html>
<html ng-app="application">
<head>
<meta charset="utf-8">
<!-- bootstrap CSS -->
<link rel="stylesheet" href="../css/bootstrap.min.css">
<!-- bootstrap theme -->
<link rel="stylesheet" href="../css/bootstrap-theme.min.css">
</head>
<body>
<div class="list-group" ng-controller="demoController as demo">
<div class="list-group-item clearfix">
<input type="text" ng-model="text" />
<p>Text is {{text}}</p>
<p>เมื่อมีการเปลี่ยนแปลงค่าใน model (input) ค่าของ text ที่แสดง(view) ก็จะเปลี่ยนไปด้วย</p>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/lib/jquery.min.js"></script>
<!-- Bootstrap JavaScript -->
<script src="js/lib/bootstrap.min.js"></script>
<!-- AngularJS JavaScript -->
<script src="js/lib/angular.min.js"></script>
<script src="js/demo.js"></script>
</body>
</html>
ไฟล์ demo.js
(function () {
'use strict';
var app = angular.module('application', []);
app.controller('demoController', function ($scope) {
$scope.text = "test";
});
})();
Ng-Submit คือ อะไร ?
Ng-Submit เป็น Directive ที่ AngularJS ใช้ Binding Event onSubmit ที่ใช้ในการส่งค่าจากฟอร์ม
<form ng-submit="ฟังก์ชั่น/เงื่อนไข">
ลองสร้างฟอร์มกันดีกว่า
สร้างไฟล์ html ใหม่ แล้วทำการสร้างฟอร์มที่มี form control 3 อัน ได้แก่
- input
- select item
- textarea
<!DOCTYPE html>
<html ng-app="application">
<head>
<meta charset="utf-8">
<!-- bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- bootstrap theme -->
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
</head>
<body ng-controller="demoController as demo">
<div class="container">
<form class="form-horizontal" ng-submit="addData(datas)">
<fieldset>
<!-- Form Name -->
<legend>Form Name</legend>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Text Input</label>
<div class="col-md-4">
<input type="text" ng-model="data.text" name="textinput" id="textinput" class="form-control input-md">
</div>
</div>
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-4 control-label" for="selectbasic">Select Basic</label>
<div class="col-md-4">
<select ng-model="data.select" id="selectbasic" name="selectbasic" class="form-control">
<option value="" selected></option>
<option value="1">Option one</option>
<option value="2">Option two</option>
</select>
</div>
</div>
<!-- Textarea -->
<div class="form-group">
<label class="col-md-4 control-label" for="textarea">Text Area</label>
<div class="col-md-4">
<textarea ng-model="data.textarea" name="textarea" id="textarea" class="form-control" >default text</textarea>
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label" for="singlebutton">Submit</label>
<div class="col-md-4">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</fieldset>
</form>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/lib/jquery.min.js"></script>
<!-- Bootstrap JavaScript -->
<script src="js/lib/bootstrap.min.js"></script>
<!-- AngularJS JavaScript -->
<script src="js/lib/angular.min.js"></script>
<script src="js/demoform.js"></script>
</body>
</html>
สร้างไฟล์ demoform.js โดยมีรายละเอียดดังนี้
(function () {
'use strict';
var app = angular.module('application', []);
app.controller('demoController', function ($scope) {
$scope.datas =[]; // เก็บข้อมูลทั้งหมดที่ถูกส่งจากฟอร์ม
$scope.data ={}; // ข้อมูลที่ผูกกับ form
// ฟังก์ชั่น เพิ่มข้อมูลลง datas
$scope.addData = function (datas) {
datas.push($scope.data);
$scope.data = {};
};
});
})();
จากนั้นทำการใส่ ng-submit ใน <form> โดยรับตัวแปร datas เป็นพารามิเตอร์
<div class="container"> <form class="form-horizontal" ng-submit="addData(datas)"> <fieldset>
เพิ่มส่วนแสดงผลค่าที่ถูกส่งมา
</form>
<div class="list-group">
<div class="list-group-item clearfix" ng-repeat="data in datas">
<h3>Text Input : {{data.text}}</h3>
<h3>Select : {{data.select}}</h3>
<h3>Text Area : {{data.textarea}}</h3>
</div>
</div>
</div>
จะได้ผลลัพธ์ดังนี้ Demo
Challenge 8: Add Review
อยู่ๆ คุณทานากะก็บอกว่า เค้าอยากได้หน้าเว็บส่วนของการ Review ร้าน โดยมีข้อมูลดังนี้
- ชื่อ - สกุล
- อีเมล์
- จำนวนดาว
- ข้อเสนอแนะเพิ่มเติม
โดยให้สร้างหน้า Review ร้านใหม่อยู่ในโฟลเดอร์เดียวกับที่เก็บ sushistore.html
สามารถดูผลลัพธ์ได้ที่ Demo
ไฟล์ storereview.html
<!DOCTYPE html>
<html ng-app="application">
<head>
<meta charset="utf-8">
<!-- bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- bootstrap theme -->
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
</head>
<body>
<header>
<h1 class="text-center">Review {{"Tanaka" | uppercase}}{{"-San"}}'s Sushi Store</h1>
<h2 class="text-center">Open Since {{10*200}}.</h2>
</header>
<div class="container" ng-controller="reviewController as review">
<div class="list-group">
<legend>Reviews</legend>
<blockquote ng-repeat="..."><!-- Review ทั้งหมด -->
<b>ชื่อ - จำนวนดาว Star(s)</b>
<p>แนะนำ</p>
<small>อีเมล์</small>
</blockquote>
<blockquote>
<b>ชื่อ - จำนวนดาว Star(s)</b>
<p>แนะนำ</p>
<small>อีเมล์</small>
</blockquote>
</div>
<form class="form-horizontal" ng-submit="...">
<fieldset>
<!-- Form Name -->
<legend>Review Form</legend>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">ชื่อ</label>
<div class="col-md-4">
<input type="text" ng-model="..." name="textinput" id="textinput" class="form-control input-md">
</div>
</div>
<!-- email input-->
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">อีเมล์</label>
<div class="col-md-4">
<input type="text" ng-model="..." name="textinput" id="textinput" class="form-control input-md">
</div>
</div>
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-4 control-label" for="selectbasic">Select Basic</label>
<div class="col-md-4">
<select ng-model="..." id="selectbasic" name="selectbasic" class="form-control">
<option value="1">1 Stars</option>
<option value="2">2 Stars</option>
<option value="3">3 Stars</option>
<option value="4">4 Stars</option>
<option value="5">5 Stars</option>
</select>
</div>
</div>
<!-- Textarea -->
<div class="form-group">
<label class="col-md-4 control-label" for="textarea">Text Area</label>
<div class="col-md-4">
<textarea ng-model="..." name="textarea" id="textarea" class="form-control" >default text</textarea>
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label" for="singlebutton"> </label>
<div class="col-md-4">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</fieldset>
</form>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/lib/jquery.min.js"></script>
<!-- Bootstrap JavaScript -->
<script src="js/lib/bootstrap.min.js"></script>
<!-- AngularJS JavaScript -->
<script src="js/lib/angular.min.js"></script>
<script src="js/review.js"></script>
</body>
</html>
ไฟล์ review.js
(function () {
'use strict';
var app = angular.module('application', []);
app.controller('reviewController', function ($scope) {
});
})();