本文介绍了一个使用Angular框架从JSON文件加载数据的例子。通过$http服务发起GET请求获取JSON数据，并将其展示在一个表格中。该示例展示了如何定义Angular模块、控制器，以及如何使用作用域变量传递数据。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="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="10px" cellspacing="0">
<center>信息表</center>
<tr>
<td>ID</td>
<td>用户</td>
<td>年龄</td>
</tr>
<tr ng-repeat="user in users">
<td>{{user.id}}</td>
<td>{{user.name}}</td>
<td>{{user.age}}</td>
</tr>
</table>
</center>
</body>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="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="10px" cellspacing="0">
<center>信息表</center>
<tr>
<td>ID</td>
<td>用户</td>
<td>年龄</td>
</tr>
<tr ng-repeat="user in users">
<td>{{user.id}}</td>
<td>{{user.name}}</td>
<td>{{user.age}}</td>
</tr>
</table>
</center>
</body>
</html>
[{"id":1,"name":"张三","age":20},
{"id":2,"name":"李四","age":23},
{"id":3,"name":"王五","age":26}]
扫一扫
47
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
