我正在开发一个项目,在其中集成 WooCommerce API 在使用 AngualrJS 的移动应用程序中。
这里是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
最佳答案
只需更改您的 ng-repeat
像这样:<li ng-repeat="item in data.products">
您的产品位于 key products
下在你的data
。请参阅下面的工作代码。
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>
关于javascript - AngularJS ng :repeat not working,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34435604/