AngularJS $ http不起作用？
[英]AngularJS $http dosen't work?
问题描述
I'm a newbie with AngularJS i want to retrive all products in an html page but it shows nothing even if '/allProd' works perfectly without angular 
我是AngularJS的新手我想在html页面中检索所有产品但是即使'/ allProd'在没有角度的情况下完美地工作也没有显示任何内容
app.js app.js
var app=angular.module('crm',[]);
app.controller('CRMController', function($scope,$http){
$scope.products=[];
$http.get('/allProd')
.then(function(data){
$scope.products=data;
});
});
index.html 的index.html
<html data-ng-app="crm" >
<head>
<meta charset="ISO-8859-1">
<title>Catalog</title>
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.4-dist/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body data-ng-controller="CRMController">
<table class="table">
<thead>
<tr>
<th> REF </th><th> DES </th><th> PRICE </th>
</tr>
</thead>
<tbody >
<tr data-ng-repeat="p in products.content">
<td>{{p.reference}}</td>
<td>{{p.designation}}</td>
<td>{{p.price}}</td>
</tr>
</tbody>
</table>
<script type="text/javascript" src="angular/angular.min.js"></script>
<script type="text/javascript" src="angular/angular-sanitize.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
PS: I'm using angular 1.5.6 and spring-boot 1.5.2.RELEASE PS：我使用的是角1.5.6和弹簧启动1.5.2.RELEASE
4 个解决方案
解决方案1
0 2017-04-04 23:54:33
According to the documentation for $http the actual response body is in the data property of the response. 根据$http的文档，实际响应主体位于响应的data属性中。
$http.get('/allProd')
.then(function(response){
$scope.products = response.data;
});
解决方案2
0 2017-04-05 03:28:51
You will have to do 你必须这样做
$scope.products = response.data
Also in your ng-repeat you have to mention an array, but it seems your initialization and assignment are not in sync for $scope.products in the controller. 同样在ng-repeat中你必须提到一个数组，但似乎你的初始化和赋值与控制器中的$ scope.products不同步。
If response.data.products is not an array, there is no point declaring $scope.products as an array 如果response.data.products不是数组，则没有必要将$scope.products声明为数组
解决方案3
0 2017-04-05 03:31:28
It is because data received on success has another property called data inside, which actually holds the required Products data. 这是因为成功收到的数据有另一个名为data inside的属性，它实际上保存了所需的Products数据。
try changing the code to 尝试将代码更改为
var app=angular.module('crm',[]);
app.controller('CRMController', function($scope,$http){
$scope.products=[];
$http.get('/allProd')
.then(function(data){
$scope.products=data.data;
});
});
解决方案4
0 2017-04-05 17:41:56
After changing in your .js file: $scope.products=data.data; 更改.js文件后：$ scope.products = data.data;
Then, change your .html file from "p in products.content" to the following: "p in products" 然后，将.html文件从“p in products.content”更改为以下内容： “p in products”
You don't need .content. 你不需要.content。 because .content is no part of data structure. 因为.content不是数据结构的一部分。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.