ไฟล์ bookstore.html
<!DOCTYPE html>
<html ng-app="">
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>
<style>
.myclass {
background-color:blue;
color:white;
}
</style>
</head>
<body>
<div class="container-fluid" ng-init="count=0">
<div class="row">
<div class="col-md-12">
<p>limited to 3 items</p>
<input type="text" ng-class="{myclass: count===3}" ng-model="count">
<button ng-click="count=count+1" ng-disabled="count===3">+</button>
<button ng-click="count=count-1" ng-disabled="count===0">-</button>
</div>
</div>
</div>
</body>
</html>
อธิบาย :
- code ด้านบนไม่มีการเรียกใช้ module ใดๆ จึงไม่ได้ประกาศชื่อ module ใน ng-app
- สร้าง CSS class กำหนดชื่อ class เป็น myclass มีพื้นหลังสีน้ำเงิน ตัวอักษรสีขาว
- กำหนดค่าเริ่มต้นให้ count=0 ด้วย ng-init
- กำหนดให้ myclass ถูกเรียกใช้งาน เมื่อ count เท่ากับ 3 นั่นคือ style ของ tag input จะเปลี่ยนไปเมื่อ count เป็น 3
- เพิ่มค่าตัวแปร count เมื่อกดปุ่ม +
- ลดค่าตัวแปร count เมื่อกดปุ่ม -
- กำหนดให้ button ทั้งสองถูก disabled เมื่อ count มีค่าเท่ากับ 3 และ 0 เพื่อไม่ให้กดเพิ่ม item ได้มากกว่า 3 และป้องกันไม่ให้ item ติดลบ
จากตัวอย่างด้านบน จะสังเกตุว่าเป็นการเขียนเงื่อนไขไว้ภายใน tag html ซึ่งไม่สะดวกต่อการอ่าน และแก้ไขโค้ด ดังนั้น จึงควรสร้าง module และควบคุมการทำงานต่างๆ ด้วย controller ดังนี้
ไฟล์ app.js
(function(){
app = angular.module('myapp',[]);
app.controller('ButtonClick',function(){
this.count=0;
this.plus=function(){
this.count=this.count+1;
};
this.minus=function(){
this.count=this.count-1;
};
this.checkPlus=function(){
return this.count===3;
};
this.checkMinus=function(){
return this.count===0;
};
});
})();
อธิบาย :
ไฟล์ bootstore.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>
<style>
.myclass {
background-color:blue;
color:white;
}
</style>
</head>
<body>
<div class="container-fluid" ng-controller="ButtonClick as btn"> <div class="row">
<div class="col-md-12">
<p>limited to 3 items</p>
<input type="text" ng-model="btn.count" ng-class="{myclass: btn.checkPlus()}">
<button ng-click="btn.plus()" ng-disabled="btn.checkPlus()">+</button>
<button ng-click="btn.minus()" ng-disabled="btn.checkMinus()">-</button>
</div>
</div>
</div>
</body>
</html>
ไฟล์ app.js
(function(){
app = angular.module('myapp',[]);
app.controller('ButtonClick',function(){
this.count=0;
this.plus=function(){
this.count=this.count+1;
};
this.minus=function(){
this.count=this.count-1;
};
this.checkPlus=function(){
return this.count===3;
};
this.checkMinus=function(){
return this.count===0;
};
});
})();
อธิบาย :
- สร้าง module ชื่อ myapp
- สร้าง controller ชื่อ ButtonClick
- ประกาศค่าเริ่มต้นให้ count ด้วย this.count=0;
- สร้างฟังก์ชั่น plus เพื่อทำการเพิ่มค่า count
- สร้างฟังก์ชั่น minus เพื่อทำการลดค่า count
- สร้างฟังก์ชั่น checkPlus เพื่อตรวจสอบว่า count เท่ากับ 3 หรือไม่ ถ้าใช่ให้ return true
- สร้างฟังก์ชั่น checkMinus เพื่อตรวจสอบว่า count เท่ากับ 0 หรือไม่ ถ้าใช่ให้ return true
ไฟล์ bootstore.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>
<style>
.myclass {
background-color:blue;
color:white;
}
</style>
</head>
<body>
<div class="container-fluid" ng-controller="ButtonClick as btn"> <div class="row">
<div class="col-md-12">
<p>limited to 3 items</p>
<input type="text" ng-model="btn.count" ng-class="{myclass: btn.checkPlus()}">
<button ng-click="btn.plus()" ng-disabled="btn.checkPlus()">+</button>
<button ng-click="btn.minus()" ng-disabled="btn.checkMinus()">-</button>
</div>
</div>
</div>
</body>
</html>
อธิบาย :
ผลลัพธ์จากการเขียนโค้ดทั้งสองรูปแบบเหมือนกัน แต่ต่างกันที่รูปแบบการเขียนโปรแกรมเท่านั้น
- เรียกใช้ module ที่ชื่อ myapp
- include ไฟล์ app.js
- ประกาศ Directive Controller ตั้ง alias เป็น btn
- ประกาศ Directive ng-model เพื่อผูกค่า count ไว้กับ tag input
- ประกาศ Directive ng-class เพื่อเรียกใช้งาน class ตามฟังก์ชั่น checkPlus
- ประกาศ Directive ng-click ให้เรียกใช้ฟังก์ชั่น plus และ minus เมื่อคลิกปุ่ม + และ - จำทำการเพิ่มค่า/ลดค่า count
- ประกาศ Directive ng-disabled เพื่อทำงานกับฟังก์ชั่น checkPlus และ checkMinus ซึ่งปุ่มจะถูก disabled เมื่อ ฟังก์ชั่นทั้งสอง return ค่าเป็น true
ผลลัพธ์จากการเขียนโค้ดทั้งสองรูปแบบเหมือนกัน แต่ต่างกันที่รูปแบบการเขียนโปรแกรมเท่านั้น
ผลลัพธ์
ไม่มีความคิดเห็น:
แสดงความคิดเห็น