Question

我是AngularJS的新手我想在html页面中检索所有产品，但即使＆＃39; / allProd＆＃39;它也没有显示任何内容。没有角度的完美工作

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

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

What i got

PS：我使用的是角1.5.6和弹簧启动1.5.2.RELEASE

Answer 1

根据documentation for $http，实际响应正文位于响应的data属性中。

$http.get('/allProd')
.then(function(response){
    $scope.products = response.data;
});

Answer 2

你必须这样做

$scope.products = response.data

同样在ng-repeat中你必须提到一个数组，但似乎你的初始化和赋值与控制器中的$ scope.products不同步。

如果response.data.products不是数组，则无法将$scope.products声明为数组

Answer 3

这是因为成功收到的数据有另一个名为data inside的属性，它实际上保存了所需的Products数据。

尝试将代码更改为

var app=angular.module('crm',[]);
app.controller('CRMController', function($scope,$http){
    $scope.products=[];
        $http.get('/allProd')
         .then(function(data){
         $scope.products=data.data;
    });
});

Answer 4

更改.js文件后： $ scope.products = data.data;

然后，在products.content＆＃34; 中更改＆＃34; p中的.html文件以下内容： ＆＃34;产品＆＃34;

你不需要.content。因为.content不是数据结构的一部分。

AngularJS $ http工作了吗？

4 个答案: