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实用代码片段集合
Aug 12 Javascript
在JS中最常看到切最容易迷惑的语法(转)
Oct 29 Javascript
js 上传图片预览问题
Dec 06 Javascript
javascript常用方法、属性集合及NodeList 和 HTMLCollection 的浏览器差异
Dec 25 Javascript
Jquery ajaxStart()与ajaxStop()方法(实例讲解)
Dec 18 Javascript
JQuery点击行tr实现checkBox选中的简单实例
May 26 Javascript
JavaScript中Array对象用法实例总结
Nov 29 Javascript
bootstrap multiselect 多选功能实现方法
Jun 05 Javascript
解决webpack打包速度慢的解决办法汇总
Jul 06 Javascript
10个经典的网页鼠标特效代码
Jan 09 Javascript
js实现点赞按钮功能的实例代码
Mar 06 Javascript
Vue实现点击导航栏当前标签后变色功能
Aug 19 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+SqlServer实现分页显示
2006/10/09 PHP
用PHP代替JS玩转DOM的思路及示例代码
2014/06/15 PHP
PHP里面把16进制的图片数据显示在html的img标签上(实现方法)
2017/05/02 PHP
phpstorm最新激活码分享亲测phpstorm2020.2.3版可用
2020/11/22 PHP
如何重写Laravel异常处理类详解
2020/12/20 PHP
10款非常有用的 Ajax 插件分享
2012/03/14 Javascript
javascript当中的代码嗅探扩展原生对象和原型(prototype)
2013/01/11 Javascript
JavaScript自定义事件介绍
2013/08/29 Javascript
js实现带关闭按钮始终显示在网页最底部工具条的方法
2015/03/02 Javascript
js实现YouKu的漂亮搜索框效果
2015/08/19 Javascript
JS键盘版计算器的制作方法
2016/12/03 Javascript
ES2015 Symbol 一种绝不重复的值
2016/12/25 Javascript
详解开发react应用最好用的脚手架 create-react-app
2018/04/24 Javascript
layui框架table 数据表格的方法级渲染详解
2018/08/19 Javascript
React手稿之 React-Saga的详解
2018/11/12 Javascript
函数式编程入门实践(一)
2019/04/20 Javascript
vue的注意规范之v-if 与 v-for 一起使用教程
2019/08/04 Javascript
python 正则表达式 概述及常用字符
2009/05/04 Python
浅析Python中元祖、列表和字典的区别
2016/08/17 Python
python中子类继承父类的__init__方法实例
2016/12/15 Python
python针对excel的操作技巧
2018/03/13 Python
Python3中列表list合并的四种方法
2019/04/19 Python
python+rsync精确同步指定格式文件
2019/08/29 Python
实现ECharts双Y轴左右刻度线一致的例子
2020/05/16 Python
python 输入字符串生成所有有效的IP地址(LeetCode 93号题)
2020/10/15 Python
Rakuten Kobo台湾:电子书、eReaders和Reading应用程式
2017/11/24 全球购物
2014年小班元旦活动方案
2014/02/16 职场文书
酒鬼酒广告词
2014/03/21 职场文书
项目投资意向书
2014/04/01 职场文书
安全生产一岗双责责任书
2014/07/28 职场文书
三严三实对照检查材料思想汇报
2014/09/28 职场文书
环境工程专业毕业生求职信
2014/09/30 职场文书
村党支部书记四风问题个人对照检查材料思想汇报
2014/10/06 职场文书
详解Laravel制作API接口
2021/05/31 PHP
厉害!这是Redis可视化工具最全的横向评测
2021/07/15 Redis
详解Python中的for循环
2022/04/30 Python