anjular.js读取数据库数据调用实例
生活随笔
收集整理的這篇文章主要介紹了
anjular.js读取数据库数据调用实例
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
以下是實(shí)例代碼：
<!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>數(shù)據(jù)統(tǒng)計(jì)</h3> <table><tr><th>編號(hào)</th><th>名稱</th><th>點(diǎn)擊</th><th>訪問時(shí)間<i id="buffer"></i></th><th>所屬</th></tr><tr ng-repeat="x in names"><td>{{ x.id }} </td> <!--編號(hào)--><td>{{ x.name }} </td> <!--名稱--> <td>{{ x.click }} 次</td> <!--點(diǎn)擊--><td>{{ x.time | date:'yyyy-MM-dd HH:mm:ss' }}</td> <!--時(shí)間--><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("數(shù)據(jù)接口地址").success(function (response) {$scope.names = response; buffer.style.display = 'none'; }); });</script></body> </html>注：有連接外部地址，時(shí)間久遠(yuǎn)的緣故，可能已經(jīng)失效。
創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)總結(jié)
以上是生活随笔為你收集整理的anjular.js读取数据库数据调用实例的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： windowswps怎么以文件形式发送_
- 下一篇： linux安装apache+mysql+