anjular.js读取数据库数据调用实例

最新推荐文章于 2023-11-09 09:44:05 发布

任聪聪

最新推荐文章于 2023-11-09 09:44:05 发布

阅读量1.7k

点赞数 1

分类专栏： Javascript 文章标签：数据库数据实例 anjular

本文链接：https://blog.csdn.net/hj960511/article/details/52229052

版权

Javascript 专栏收录该内容

43 篇文章 1 订阅

订阅专栏

以下是实例代码：

<!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">

<h3>数据统计</h3>
<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.id }} </td>     <!--编号-->
    <td>{{ x.name }} </td>   <!--名称-->  
    <td>{{ x.click }} 次</td>   <!--点击-->
    <td>{{ x.time | date:'yyyy-MM-dd HH:mm:ss' }}</td>   <!--时间-->
    <td>{{ x.cate}}</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) {
    $http.get("数据接口地址")
    .success(function (response) {
    		$scope.names = response; 
    		buffer.style.display = 'none';    
    });
});


</script>

</body>
</html>

注：有连接外部地址，时间久远的缘故，可能已经失效。