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 相关文章推荐
js url传值中文乱码之解决之道
Nov 20 Javascript
javascript 打开页面window.location和window.open的区别
Mar 17 Javascript
关于获取DIV内部内容报错的原因分析及解决办法
Jan 29 Javascript
jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】
Sep 20 Javascript
微信小程序 限制1M的瘦身技巧与方法详解
Jan 06 Javascript
基于node.js制作简单爬虫教程
Jun 29 Javascript
ReactJs实现树形结构的数据显示的组件的示例
Aug 18 Javascript
详解Vue 中 extend 、component 、mixins 、extends 的区别
Dec 20 Javascript
vue-cli+webpack项目 修改项目名称的方法
Feb 28 Javascript
如何检查一个对象是否为空
Apr 11 Javascript
Vue.js轮播图走马灯代码实例(全)
May 08 Javascript
layui关闭层级、简单监听的实例
Sep 06 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
第十四节--命名空间
2006/11/16 PHP
php读取txt文件组成SQL并插入数据库的代码(原创自Zjmainstay)
2012/07/31 PHP
PHP版本如何选择?应该使用哪个版本?
2015/05/13 PHP
phpmailer简单发送邮件的方法(附phpmailer源码下载)
2016/06/13 PHP
利用PHP访问MySql数据库的逻辑操作以及增删改查的实例讲解
2017/08/30 PHP
详解json在php中的应用
2018/09/30 PHP
使用ucenter实现多站点同步登录的讲解
2019/03/21 PHP
php和nginx交互实例讲解
2019/09/24 PHP
Javascript客户端脚本的设计和应用
2006/08/21 Javascript
用js遍历 table的脚本
2008/07/23 Javascript
基于jquery实现的上传图片及图片大小验证、图片预览效果代码
2011/04/12 Javascript
js获取URL的参数的方法(getQueryString)示例
2013/09/29 Javascript
JavaScript通过元素索引号删除数组中对应元素的方法
2015/03/18 Javascript
浅析javascript的return语句
2015/12/15 Javascript
js提交form表单,并传递参数的实现方法
2016/05/25 Javascript
JavaScript获取当前时间向前推三个月的方法示例
2017/02/04 Javascript
vue如何引用其他组件(css和js)
2017/04/13 Javascript
JS鼠标3次点击事件实现代码及扩展思路
2017/09/12 Javascript
解决vue 绑定对象内点击事件失效问题
2018/09/05 Javascript
Vue中keep-alive 实现后退不刷新并保持滚动位置
2020/03/17 Javascript
uni-app使用微信小程序云函数的步骤示例
2020/05/22 Javascript
[02:33]DOTA2亚洲邀请赛趣味视频之吐真话筒
2018/03/31 DOTA
利用Python查看目录中的文件示例详解
2017/08/28 Python
Python实现购物车程序
2018/04/16 Python
利用Python实现kNN算法的代码
2019/08/16 Python
python实现自动化报表功能(Oracle/plsql/Excel/多线程)
2019/12/02 Python
CSS3改变浏览器滚动条样式
2019/01/04 HTML / CSS
澳大利亚婴儿、幼儿和儿童在线设计师商店:Smooch Baby
2019/02/16 全球购物
戴尔新加坡官网:Dell Singapore
2020/12/13 全球购物
C#公司笔试题
2014/03/28 面试题
投标邀请书范文
2014/01/31 职场文书
合伙协议书范本
2014/04/21 职场文书
铁路安全事故反思
2014/04/26 职场文书
Go语言-为什么返回值为接口类型,却返回结构体
2021/04/24 Golang
Python机器学习应用之基于线性判别模型的分类篇详解
2022/01/18 Python
详解apache编译安装httpd-2.4.54及三种风格的init程序特点和区别
2022/07/15 Servers