ng-重复以字母方式重复

时间:2014-11-13 15:39:20

标签: angularjs ng-repeat

我有多个级别的json,需要使用ng-repeat显示但是我遇到了问题

JSON

$scope.product =  {
    "product": [
        {
            "name": "0001",
            "tagline": "Scrub peached 60% cot 40% poly\r\ns/s v neck scrub uniform w/ 1 chest pkt"
        }
    ],
    "sizes": [
        "XXL",
        "XXXL",
        "XS",
        "XL",
        "S",
        "M",
        "L"
    ],
    "colors": [
        {
            "name": "WHITE",
            "image": "/kalypso/commonsController.do?param=imageLoader&imageName=1239378389537_white1.JPG"
        }
    ],
    "images": [
        {
            "big": "/kalypso/commonsController.do?param=imageLoader&imageName=2010_08/1281620375516_UT01.jpg",
            "small": [
                "/kalypso/commonsController.do?param=imageLoader&imageName=2009_07/D0001-b.jpg"
            ],
            "thumb": "/kalypso/commonsController.do?param=imageLoader&imageName=2010_08/1281620375516_UT01.jpg"
        }
    ]
}

AngularJS

$scope.productsImages =  $scope.product.images[0].thumb;
$scope.productsImgSmall =  $scope.product.images[0].small;
$scope.productsImgBig =  $scope.product.images[0].big;
$scope.productsColors =  $scope.product.colors[0].cname;
$scope.productsColorsImages =  $scope.product.colors[0].image;
$scope.productsSizes =  $scope.product.sizes;
$scope.productsName =  $scope.product.product[0].name;
$scope.productsTag =  $scope.product.product[0].tagline;
$scope.productsPrice =  $scope.product.product[0].price;
$scope.productsId =  $scope.product.product[0].prdId;
console.log($scope.productsColors);

它正在重复每个单词的颜色名称,如果数组长度为零,我将收到重复的错误消息。请帮忙。

  

错误:[ngRepeat:dupes] http://errors.angularjs.org/1.3.0/ngRepeat/dupes?p0=color%20in%20productsColors&p1=string%3AT&p2=%22T%22

2 个答案:

答案 0 :(得分:0)

如果你的json对象上没有唯一的id

,我会调查track by $index
item in items track by $id(item)

item in items track by $index

如果你想要角色来处理它

答案 1 :(得分:0)

instead of array [i] value use like this 
$scope.productsImages =  $scope.product.images;

HTML

<ul>
   <li ng-repeat="prd in productsImages">
    {{prd.thumb}}
</li>
</ul>

use repeat function for all key

another Example 
 $scope.data.colors = $scope.product.colors
<ul>
   <li ng-repeat="color in product.colors">
    {{color.name}}
 {{color.image}}
</li>
</ul>