วันพุธที่ 7 มกราคม พ.ศ. 2558

AngularJS Tables

บทความ Angular Tables จะเป็นการนำข้อมูลในที่ encode เป็น JSON มาทำการแสดงผลโดยใช้ AngularJS ซึ่งนำบทความ AngularJS HttpRequest มาต่อยอดรูปแบบการแสดงผลในลักษณะตารางโดยใช้ <table> ใน HTML

ดังนั้น จึงขออ้างอิงไฟล์ในบทความ AngularJS HttpRequest ซึ่งได้แก่


  • Database ที่ชื่อ mobile มี Table ชื่อ Customer ประกอบด้วย field 2 ตัว คือ first_name และ last_name
  • dbcon.php
  • customer.php
ในส่วนของไฟล์ index.php นำมาแก้ไขซักเล็กน้อย ดังนี้

<!DOCTYPE html>
<html>

<head>
  <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>
</head>

<body>
<div ng-app="" ng-controller="customersController" > 


 <table border='1px' cellpadding="10px" cellspacing='0px'> 

   <tr>
<td>FirstName</td>
<td>LastName</td>
   </tr>
   <tr ng-repeat="x in person">
<td>{{ x.first_name }}</td>
<td>{{ x.last_name }}</td>
   </tr>
 </table>


</div>

<script>
function customersController($scope,$http) {
  $http.get("http://127.0.0.1/angular/customer.php")
  .success(function(response) {$scope.person = response;});
}
</script>

</body>
</html>


ส่วนที่แก้ไข คือ อักษรสีแดง ทั้งหมด อธิบายได้ว่า มีการสร้างตารางขึ้นมา 1 ตาราง ประกอบด้วย 2 คอลัมน์ คือ FirstName และ LastName จาก
นั้น ทำการสร้างแถว โดยการสร้างจะใช้วิธีการวนลูปตามจำนวนข้อมูลใน Array ที่ชือ person เนื่องจาก property person นั้น เก็บข้อมูลที่ encode ด้วย JSON ทำให้ข้อมูลที่ดึงจาก Database อยู่ในรูปของ Array Object



ไม่มีความคิดเห็น:

แสดงความคิดเห็น