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

ゝ一世哀愁。 2022-02-23 01:40 175阅读 0赞

### 需求如下： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09ubHlvbmVGcmlzdA_size_16_color_FFFFFF_t_70][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09ubHlvbmVGcmlzdA_size_16_color_FFFFFF_t_70 1][]

### 实现代码如下 ###

<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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09ubHlvbmVGcmlzdA_size_16_color_FFFFFF_t_70]: /images/20220223/5d3d7ee00dc24d219292bf02b42aa573.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09ubHlvbmVGcmlzdA_size_16_color_FFFFFF_t_70 1]: /images/20220223/8ca500f33f6c4a5b9b8b6869d165cd5b.png