Angular.JS读取数据库数据调用完整实例


Posted in Javascript onJuly 02, 2019

本文实例讲述了Angular.JS读取数据库数据调用。分享给大家供大家参考,具体如下:

以下是实例代码:

<!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.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) {
  $http.get("Customers_MySQL.php")
  .success(function (response) {
      $scope.names = response;
      buffer.style.display = 'none';  //成功调取数据之后
  });
  //成功调取mysql数据,将response.records改为response,因为它是个对象
});
</script>
</body>
</html>

更多关于AngularJS相关内容可查看本站专题:《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法
Jan 04 Javascript
网页中返回顶部代码(多种方法)另附注释说明
Apr 24 Javascript
Javascript 命名空间模式
Nov 01 Javascript
中文输入法不触发onkeyup事件的解决办法
Jul 09 Javascript
JavaScript跨域方法汇总
Oct 16 Javascript
利用JavaScript的AngularJS库制作电子名片的方法
Jun 18 Javascript
JavaScript实现横向滑出的多级菜单效果
Oct 09 Javascript
同步异步动态引入js文件的几种方法总结
Sep 23 Javascript
AngularJS表单和输入验证实例
Nov 02 Javascript
微信小程序仿朋友圈发布动态功能
Jul 15 Javascript
详解在Javascript中进行面向切面编程
Apr 28 Javascript
JSX在render函数中的应用详解
Sep 04 Javascript
js实现for循环跳过undefined值示例
Jul 02 #Javascript
Vue的路由及路由钩子函数的实现
Jul 02 #Javascript
Node.js 实现远程桌面监控的方法步骤
Jul 02 #Javascript
使用vue中的混入mixin优化表单验证插件问题
Jul 02 #Javascript
vue history 模式打包部署在域名的二级目录的配置指南
Jul 02 #Javascript
简单了解微信小程序的目录结构
Jul 01 #Javascript
vue如何实现自定义底部菜单栏
Jul 01 #Javascript
You might like
用PHP与XML联手进行网站编程代码实例
2008/07/10 PHP
php设计模式 Composite (组合模式)
2011/06/26 PHP
访问编码后的中文URL返回404错误的解决方法
2014/08/20 PHP
Yii框架引用插件和ckeditor中body与P标签去除的方法
2017/01/19 PHP
php fread函数使用方法总结
2019/05/28 PHP
php源码的安装方法和实例
2019/09/26 PHP
JavaScript实际应用:innerHTMl和确认提示的使用
2006/06/22 Javascript
JS 继承实例分析
2008/11/04 Javascript
Ext面向对象开发实践(续)
2008/11/18 Javascript
Bootstrap每天必学之进度条
2015/11/30 Javascript
javascript防篡改对象实例详解
2017/04/10 Javascript
JS实现汉字与Unicode码相互转换的方法详解
2017/04/28 Javascript
angularJS 发起$http.post和$http.get请求的实现方法
2017/05/18 Javascript
解决使用Vue.js显示数据的时,页面闪现原始代码的问题
2018/02/11 Javascript
JavaScript控制浏览器全屏显示简单示例
2018/07/05 Javascript
Vue实现按钮旋转和移动位置的实例代码
2018/08/09 Javascript
关于在vue 中使用百度ueEditor编辑器的方法实例代码
2018/09/14 Javascript
详解在React项目中安装并使用Less(用法总结)
2019/03/18 Javascript
微信JS-SDK updateAppMessageShareData安卓不能自定义分享详解
2019/03/29 Javascript
详解Vue前端对axios的封装和使用
2019/04/01 Javascript
vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码
2019/04/04 Javascript
Nodejs中使用puppeteer控制浏览器中视频播放功能
2019/08/26 NodeJs
详解Node.js使用token进行认证的简单示例
2020/05/25 Javascript
[01:10]DOTA2次级职业联赛 - Fly战队宣传片
2014/12/01 DOTA
[01:04:06]DOTA2上海特级锦标赛A组资格赛#2 Secret VS EHOME第一局
2016/02/26 DOTA
Python中实现对list做减法操作介绍
2015/01/09 Python
Python中defaultdict与lambda表达式用法实例小结
2018/04/09 Python
Python 面试中 8 个必考问题
2018/11/16 Python
记录Python脚本的运行日志的方法
2019/06/05 Python
pytorch梯度剪裁方式
2020/02/04 Python
全球速卖通俄罗斯站:AliExpress俄罗斯
2019/06/17 全球购物
《鞋匠的儿子》教学反思
2014/03/02 职场文书
部门2014年度工作总结
2014/11/12 职场文书
实习生辞职信范文
2015/03/02 职场文书
三十年同学聚会感言
2015/07/30 职场文书
Golang生成Excel文档的方法步骤
2021/06/09 Golang