我有以下格式的词典列表:
[{
"product_id": 1,
"product_name": "Formal Shoes",
"product_price": 220,
"img_path": "images/tp1.jpg"
}, {
"product_id": 2,
"product_name": "Formal Shirt",
"product_price": 190,
"img_path": "images/tp2.jpg"
}, {
"product_id": 3,
"product_name": "Blazer",
"product_price": 160,
"img_path": "images/tp3.jpg"
}, {
"product_id": 4,
"product_name": "Casual Shoes",
"product_price": 250,
"img_path": "images/tp4.jpg"
}, {
"product_id": 5,
"product_name": "Inner Wear",
"product_price": 50,
"img_path": "images/ip2.jpg"
}, {
"product_id": 6,
"product_name": "Shoes",
"product_price": 150,
"img_path": "images/shp8.jpg"
}, {
"product_id": 7,
"product_name": "Formal Shirt",
"product_price": 100,
"img_path": "images/cap1.jpg"
}, {
"product_id": 8,
"product_name": "Watch",
"product_price": 200,
"img_path": "images/wap3.jpg"
}]
我从api电话中获取产品。我正在尝试使用以下代码在我的html中呈现它:
<div data-ng-repeat="product in products">
但这会引发错误:
angular.js:10061 Error: [ngRepeat:dupes] http://errors.angularjs.org/1.2.23/ngRepeat/dupes?p0=product%20in%20products&p1=string%3Ad
at angular.js:36
at angular.js:20508
at Object.fn (angular.js:12385)
at k.$digest (angular.js:12512)
at k.$apply (angular.js:12777)
at h (angular.js:8371)
at v (angular.js:8585)
at XMLHttpRequest.w.onreadystatechange (angular.js:8524)
还有其他办法吗?
我尝试了以下方法,但它没有起作用: 1.迭代数字i并使用i作为访问产品的索引 2.使用$ index跟踪
<script>
var app = angular.module('prodModule', []);
app.controller('prodCntlr', function ($scope, $http) {
$scope.getProducts = function () {
$http({
method: 'GET',
url : url
}).then(function (response) {
var prds = JSON.parse(response.data.Payload)
console.log(prds['Payload']);
$scope.products = prds['Payload'];
}).catch(function (error) {
console.log("error!")
});
};
});
</script>