AngularJS ng：重複不起作用

Question

我正在使用AngualrJS在移動應用程序中整合WooCommerce API 的項目。

這裏是the API它返回一個產品列表，這是我實現AngualrJS的HTML頁面。

問題是我無法在HTML頁面上顯示多個產品。

HTML代碼：

<div ng-app="myApp" ng-controller="productCtrl"> 
    <ul> 
     <li>hello</li> 
     <li ng:repeat="item in data"> 
      {{item.id}} has children: 
     </li> 
    </ul> 
</div> 

JS文件：

var app = angular.module('myApp', []); 
app.controller('productCtrl', function($scope, $http) { 
    $http.get("http://www.ilexsquare.com/JwelTech/wordpress/api.php?function=GetProductsdetails") 
    .then(function (response) {$scope.data = response.data;});  
}); 

，這是我的jsfiddle代碼 jsFiddle

Answer 1

只要改變你的ng-repeat像這樣：<li ng-repeat="item in data.products">

您的產品在您的data的鑰匙products下。請參閱下面的工作代碼。

var app = angular.module('myApp', []); 
 
    app.controller('productCtrl', function($scope, $http) { 
 
     $http.get("http://www.ilexsquare.com/JwelTech/wordpress/api.php?function=GetProductsdetails") 
 
     .then(function(response) { 
 
      $scope.data = response.data; 
 
     }); 
 

 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="productCtrl"> 
 
    <ul> 
 
    <li>hello</li> 
 
    <li ng-repeat="item in data.products"> 
 
     {{item.id}} 
 
    </li> 
 
    </ul> 
 
</div>