本文介绍了一个使用AngularJS从JSON文件加载数据并显示在HTML表格中的示例。通过$http服务获取数据，并利用ng-repeat指令遍历显示。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../Angularjs/angular.js" ></script>
<script>
var app=angular.module("myApp",[]);
app.controller("myCtrl",function($scope,$http){
$http({
method:"get",
url:"myJson.json"
}).then(function success(response){
$scope.users=response.data;
},function error(){
console.log("失败");
});
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<table border="1px" cellpadding="10" cellspacing="0">
<caption>用户信息表</caption>
<thead>
<tr>
<td>ID</td>
<td>用户名</td>
<td>年龄</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users">
<td>{{user.id}}</td>
<td>{{user.name}}</td>
<td>{{user.age}}</td>
</tr>
</tbody>
</table>
</center>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../Angularjs/angular.js" ></script>
<script>
var app=angular.module("myApp",[]);
app.controller("myCtrl",function($scope,$http){
$http({
method:"get",
url:"myJson.json"
}).then(function success(response){
$scope.users=response.data;
},function error(){
console.log("失败");
});
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<table border="1px" cellpadding="10" cellspacing="0">
<caption>用户信息表</caption>
<thead>
<tr>
<td>ID</td>
<td>用户名</td>
<td>年龄</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users">
<td>{{user.id}}</td>
<td>{{user.name}}</td>
<td>{{user.age}}</td>
</tr>
</tbody>
</table>
</center>
</body>
</html>
扫一扫
552
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
