สิ่งที่ควรรู้

การใช้งานฟอร์ม

จากบทที่แล้วได้พูดถึงแนวคิดแบบ 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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!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

?
1
2
3
4
5
6
7
8
9
(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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!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 โดยมีรายละเอียดดังนี้

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
(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 เป็นพารามิเตอร์

?
11
12
13
<div class="container">
    <form class="form-horizontal" ng-submit="addData(datas)">
        <fieldset>

เพิ่มส่วนแสดงผลค่าที่ถูกส่งมา

?
49
50
51
52
53
54
55
56
57
</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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!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

?
1
2
3
4
5
6
7
8
(function () {
    'use strict';
     
    var app = angular.module('application', []);
    app.controller('reviewController', function ($scope) {
         
    });
})();