簡體   English   中英

AngularJS $ http不起作用?

[英]AngularJS $http dosen't work?

我是AngularJS的新手我想在html頁面中檢索所有產品但是即使'/ allProd'在沒有角度的情況下完美地工作也沒有顯示任何內容

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>

我得到了什么

PS:我使用的是角1.5.6和彈簧啟動1.5.2.RELEASE

根據$http文檔,實際響應主體位於響應的data屬性中。

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

你必須這樣做

$scope.products = response.data

同樣在ng-repeat中你必須提到一個數組,但似乎你的初始化和賦值與控制器中的$ scope.products不同步。

如果response.data.products不是數組,則沒有必要將$scope.products聲明為數組

這是因為成功收到的數據有另一個名為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;
    });
});

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

然后,將.html文件從“p in products.content”更改為以下內容: “p in products”

你不需要.content。 因為.content不是數據結構的一部分。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM