【AngularJS】读取数据库数据调用实例

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
  <style>
   table {
    position: relative;
   }
   
   table,
   th,
   td {
    border: 1px solid grey;
    border-collapse: collapse;
    padding: 10px 20px;
   }
   
   table tr:nth-child(odd) {
    background-color: #f1f1f1;
   }
   
   table tr:nth-child(even) {
    background-color: #ffffff;
   }
   
   i {
    display: block;
    background: url(buffer.gif) no-repeat;
    position: absolute;
    left: 50%;
    margin-left: -16px;
    top: 50px;
    width: 32px;
    height: 32px;
   }
  </style>
 </head>

 <body>
  <center style="margin-top:100px;">
   <div ng-app="myApp" ng-controller="customersCtrl">
    <h2>数据统计</h2>
    <table>
     <tr>
      <th>活动编号</th>
      <th>活动名称</th>
      <th>点击量</th>
      <th>最后访问时间<i id="buffer"></i></th>
      <th>所属栏目</th>
     </tr>
     <tr ng-repeat="x in names">
      <!--活动编号-->
      <td>{{ x.sid }} </td>
      <!--活动名称-->
      <td>{{ x.sname }} </td>
      <!--点击量-->
      <td>{{ x.sclick }} 次</td>
      <!--最后访问时间-->
      <td>{{ x.stime | date:'yyyy-MM-dd HH:mm:ss' }}</td>
      <!--所属栏目-->
      <td>{{ x.sproject }}</td>
     </tr>
    </table>
   </div>
  </center>
  
  <script>
   var buffer = document.getElementById("buffer");
   buffer.style.display = 'block';

   var app = angular.module('myApp', []);
   app.controller('customersCtrl', function($scope, $http) {
    //成功调取mysql数据，将response.records改为response,因为它是个对象
    $http.get("Customers_MySQL.php")
     .success(function(response) {
      $scope.names = response;
      buffer.style.display = 'none'; 
     });
   });
  </script>
 
 </body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容