angularJS(九)angularJsDemo之内置服务$http

需求如下:

这里需要注意的是$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>

猜你喜欢

转载自blog.csdn.net/OnlyoneFrist/article/details/89047548
今日推荐