[英]AngularJS ng:repeat not working
I am working on a project in which I am integrating WooCommerce APIs in the mobile application using AngualrJS. 我正在一个项目中,正在使用AngualrJS将WooCommerce API集成到移动应用程序中。
Here is the API which returns a list of products, and this is the HTML page on which I am implementing AngualrJS. 这是返回产品列表的API ,这是我在其上实现AngualrJS的HTML页面。
The problem is I am unable to display multiple products on the HTML page. 问题是我无法在HTML页面上显示多个产品。
HTML code: 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 file: 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;});
});
and this is my jsfiddle code jsFiddle 这是我的jsfiddle代码jsFiddle
Just change your ng-repeat
like this: <li ng-repeat="item in data.products">
只需像这样更改您的
ng-repeat
: <li ng-repeat="item in data.products">
Your products are under the key products
in your data
. 您的
products
位于data
的关键products
之下。 See the working code below. 请参阅下面的工作代码。
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.