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+jqmodal弹出窗口实现代码分明
Jun 14 Javascript
JS清除IE浏览器缓存的方法
Jul 26 Javascript
js jquery获取当前元素的兄弟级 上一个 下一个元素
Sep 01 Javascript
深入理解angularjs过滤器
May 25 Javascript
基于Vue实现图书管理功能
Oct 17 Javascript
浅谈React Native Flexbox布局(小结)
Jan 08 Javascript
vue-cli webpack模板项目搭建及打包时路径问题的解决方法
Feb 26 Javascript
使用javascript做在线算法编程
May 25 Javascript
vue.js实现插入数值与表达式的方法分析
Jul 06 Javascript
聊聊Vue 中 title 的动态修改问题
Jun 11 Javascript
JSON获取属性值方法代码实例
Jun 30 Javascript
vue实现图书管理系统
Dec 29 Vue.js
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取余函数介绍MOD(x,y)与x%y
2014/05/15 PHP
PHP+MySQL之Insert Into数据插入用法分析
2015/09/27 PHP
什么是PHP文件?如何打开PHP文件?
2017/06/27 PHP
对象特征检测法判断浏览器对javascript对象的支持
2009/07/25 Javascript
动态创建样式表在各浏览器中的差异测试代码
2011/09/13 Javascript
js操作CheckBoxList实现全选/反选(在客服端完成)
2013/02/02 Javascript
jQuery基于ajax实现带动画效果无刷新柱状图投票代码
2015/08/10 Javascript
JS实现带鼠标效果的头像及文章列表代码
2015/09/27 Javascript
使用jquery提交form表单并自定义action的实现代码
2016/05/25 Javascript
BootStrap智能表单实战系列(四)表单布局介绍
2016/06/13 Javascript
Bootstrap Navbar Component实现响应式导航
2016/10/08 Javascript
javascript事件的传播基础实例讲解(35)
2017/02/14 Javascript
js 去掉字符串前后空格实现代码集合
2017/03/25 Javascript
JavaScript仿微信(电话)联系人列表滑动字母索引实例讲解(推荐)
2017/08/16 Javascript
Javascript网页抢红包外挂实现分享
2018/01/11 Javascript
Vue用v-for给循环标签自身属性添加属性值的方法
2018/10/18 Javascript
实例介绍JavaScript中多种组合继承
2019/01/20 Javascript
ES6 对象的新功能与解构赋值介绍
2019/02/05 Javascript
[00:35]可解锁地面特效
2018/12/20 DOTA
python操作字典类型的常用方法(推荐)
2016/05/16 Python
Django项目实战之用户头像上传与访问的示例
2018/04/21 Python
对Python subprocess.Popen子进程管道阻塞详解
2018/10/29 Python
python pygame实现五子棋小游戏
2020/10/26 Python
Pycharm中切换pytorch的环境和配置的教程详解
2020/03/13 Python
对CSS3选择器的研究(详解)
2016/09/16 HTML / CSS
html5+css3之动画在webapp中的应用
2014/11/21 HTML / CSS
5 个强大的HTML5 API 函数推荐
2014/11/19 HTML / CSS
如何利用input事件来监听移动端的输入
2016/04/15 HTML / CSS
.NET笔试题(20个问题)
2016/02/02 面试题
法律专业应届生自荐信范文
2014/01/06 职场文书
《草虫的村落》教学反思
2014/02/16 职场文书
护理目标管理责任书
2014/07/25 职场文书
机关作风建设自查报告及整改措施
2014/10/21 职场文书
2014年学校法制宣传日活动总结
2014/11/01 职场文书
子女赡养老人协议书
2016/03/23 职场文书
pytorch 实现多个Dataloader同时训练
2021/05/29 Python