需求如下:
这里需要注意的是$http内置服务需在tomcat中运行
要实现这个需求 我这里建了一个json文件
[
{"name":"zhangsan","yuwen":100,"shuxue":100},
{"name":"lisi","yuwen":90,"shuxue":90},
{"name":"wangwu","yuwen":80,"shuxue":70},
{"name":"zhaoliu","yuwen":60,"shuxue":90}
]
实现代码如下
<html>
<head>
<meta charset="utf-8">
<title>AngularJs入门小demo7-内置服务$http</title>
<script type="text/javascript" src="angular.min.js"></script>
<script >
//建立模块
var app=angular.module("myapp",[]);
//创建控制器$scope就是控制层与视图层交换数据的桥梁
app.controller("myController",function($scope,$http){
$scope.findList=function(){
$http.get("data.json").success(
function(response){
$scope.list=response;
}
);
}
});
</script>
</head>
<body ng-app="myapp" ng-controller="myController" ng-init="findList()">
<table>
<tr>
<td>姓名</td>
<td>数学</td>
<td>语文</td>
</tr>
<tr ng-repeat="entity in list">
<td>{{entity.name}}</td>
<td>{{entity.shuxue}}</td>
<td>{{entity.yuwen}}</td>
</tr>
</table>
</body>
</html>