เริ่มต้นโดย refernce script ของ AngularJS ลงไปในส่วน <head> สามารถทำได้ 2 วิธี คือ
1. ดาวน์โหลดจาก http://angularjs.org/
2. อ้างอิงจาก CDN
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
ในตัวอย่างนี้ผมจะทำการ referece AngularJS ดังนี้ครับ
<!DOCTYPE html>
<html ng-app>
<head runat="server">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<body>
</body>
</html>
จะสังเกตว่าที่ tag html มีการเพิ่ม attribute ชือ ng-app เพื่อเป็นการกำหนดว่าเพจมีการใช้ AngularJS ต่อมาผมจะสร้าง Controller ขึ้นมาเพื่อควบคุมการทำงานต่างๆ โดยจะเริ่มกำหนด Datasource ให้กับ Model ก่อน ดังนี้
<script>
function
CourseController($scope) {
$scope.courses = [
{ ischeck: true, coursename: 'IT201' },
{ ischeck: false, coursename: 'EN101' },
{ ischeck: false, coursename: 'FA201' }
];
}
</script>
ที่นี้เราจะลองนำค่าจาก Model มาแสดงบนหน้าจอกันดูนะครับ โดยสร้าง div ขึ้นมาแล้วกำหนดชื่อ Controller ตาม script ข้างบน
<div ng-controller="CourseController">
<h3>Course
List</h3>
<ul>
<li ng-repeat="course in courses" style=" list-style:
none;">
<input type="checkbox" ng-model="course.ischeck"/>
<span>{{course.coursename}}</span>
</li>
</ul>
</div>
ทดสอบ Run จะได้ผลลัพธ์ ดังนี้
ต่อมาผมจะมาเพิ่มในส่วนของการเพิ่มข้อมูลลงกันบ้างนะครับ โดยเพิ่ม Textbox และปุ่ม Add ใน Code นี้มีจุดที่น่าสนใจอยู่ 2 ที่
- TextBox จะมี attribute ng-model="courseText" ซึ่งเป็นค่าที่เราจะส่งไปให้ Model เพื่อเตรียมทำการบันทึก
- Button จะมี attribute ngsubmit="addCourse()" หมายถึงว่าเมื่อมีการ Submit แล้วจะมีการ Request ในรูปแบบของ AjaxRequest
<div ng-controller="CourseController">
<h3>Course
List</h3>
<form ng-submit="addCourse()">
<input type="text" ng-model="courseText" size="30"
placeholder="add new todo here">
<input class="btn-primary" type="submit" value="add">
</form>
<ul>
<li ng-repeat="course in courses" style=" list-style:
none;">
<input type="checkbox" ng-model="course.ischeck"/>
<span>{{course.coursename}}</span>
</li>
</ul>
</div>
หลังจากนั้นให้เพิ่ม function addCourse เพื่อใช้สำหรับเพิ่มข้อมูล
<script>
function
CourseController($scope) {
$scope.courses = [
{ ischeck: true, coursename: 'IT201' },
{ ischeck: false, coursename: 'EN101' },
{ ischeck: false, coursename: 'FA201' }
];
$scope.addCourse =
function () {
$scope.courses.push({ ischeck: false, coursename: $scope.courseText });
$scope.courseText = '';
};
}
</script>
ทดสอบ Run จะได้ผลลัพธ์ ดังนี้
ต่อมาผมจะมาเพิ่มในส่วนของการแสดงจำนวนรายการที่เลือก และจำนวนรายการทั้งหมด ตาม Code นี้
<div ng-controller="CourseController">
<h3>Course
List</h3>
<span>{{remaining()}} of {{courses.length}} remaining</span>
[ <a href="" ng-click="archive()">archive</a> ]
<form ng-submit="addCourse()">
<input type="text" ng-model="courseText" size="30"
placeholder="add new todo here">
<input class="btn-primary" type="submit" value="add">
</form>
<ul>
<li ng-repeat="course in courses" style=" list-style:
none;">
<input type="checkbox" ng-model="course.ischeck"/>
<span>{{course.coursename}}</span>
</li>
</ul>
</div>
จะสังเกตว่าผมได้สร้าง function remaining เพื่อแสดงจำนวนรายการที่เลือก และ function archive เพื้อเคลียร์รายการทั้งหมด ดังนี้
<span>{{remaining()}} of {{courses.length}}
remaining</span> [ <a href="" ng-click="archive()">archive</a> ]
หลังจากทดสอบได้ผลลัพธ์ ดังนี้
ีั
สรุป Code ทั้งหมดของตัวอย่างนี้
<!DOCTYPE html>
<html ng-app>
<head runat="server">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<body>
<style>
body {
font-family: 'Century Gothic', Arial,'sans-serif';
font-size:13px;
}
</style>
<div ng-controller="CourseController">
<h3>Course
List</h3>
<span>{{remaining()}} of {{courses.length}} remaining</span>
[ <a href="" ng-click="archive()">archive</a> ]<br /><br />
<form ng-submit="addCourse()">
<input type="text" ng-model="courseText" size="30"
placeholder="add new todo here">
<input class="btn-primary" type="submit" value="add">
</form>
<ul>
<li ng-repeat="course in courses" style=" list-style:
none;">
<input type="checkbox" ng-model="course.ischeck"/>
<span>{{course.coursename}}</span>
</li>
</ul>
</div>
<script>
function
CourseController($scope) {
$scope.courses = [
{ ischeck: true, coursename: 'IT201' },
{ ischeck: false, coursename: 'EN101' },
{ ischeck: false, coursename: 'FA201' }
];
$scope.addCourse =
function () {
$scope.courses.push({ ischeck: false, coursename: $scope.courseText });
$scope.courseText
= '';
};
$scope.remaining =
function () {
var count = 0;
angular.forEach($scope.courses, function (course) {
count +=
course.ischeck ? 1 : 0;
});
return count;
};
$scope.archive =
function () {
var oldcourses = $scope.courses;
$scope.courses =
[];
angular.forEach(oldcourses, function (course) {
if (!course.ischeck)
$scope.courses.push(course);
});
};
}
</script>
</body>
</html>
เื่ท่านี้ก็สามารถสร้างรายการโดยใช้ AngularJS ได้แล้วครับ
