使用AngularJS

时间:2017-03-31 21:37:41

标签: html angularjs

我有以下格式的词典列表:

[{
    "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>

0 个答案:

没有答案