Question

以下是我的JSON文件：

[
{
    "Name":"Peter England Shirt",
    "Prodimage":["./images/zoom/zoom1hi.jpg","./images/zoom/zoom2hi.jpg","./images/zoom/zoom3hi.jpg"],
    "actualPrice":"90",
    "discountedPrice":"70",
    "desc":"Cotton",
    "Prodcolor":["#f1f40e","#adadad","#4EC67F"],
    "quantity":[1,3,4,5,60],
    "size":["XL","L","M","S"],
    "detail":"Take it away",
    "sizeChart":["16 waist","Measurements taken from size 30","Model wears size 31. Model is 6'2"],
    "shipping":[
        {
            "type":"Standard",
            "days":"5-6 days",
            "cost":"200"
        },{
            "type":"Next day",
            "days":"1 days",
            "cost":"500"
        }
    ],
    "sellerList":[
        {
            "sellerName":"ABC",
            "price":"566",
            "deliveryDay":"4-5 working days"
        },{
            "sellerName":"SEDF",
            "price":"300",
            "deliveryDay":"4-5 working days"
        },{
            "sellerName":"QWER",
            "price":"555",
            "deliveryDay":"2-5 working days"
        }
    ]

}
]

JS文件如下：

var pJson="./json/product.json";
$http.get(pJson).success(function(response){
   $scope.product=response;});

现在，如果我想访问“姓名”属性，我可以拨打{{product [0] .Name}}。

但是我无法使用ng-repeat访问Prodimage属性。我这样想：

    <div  ng-repeat="image in product.Prodimage">
            {{image[0]}}
    </div>

这是错的吗？＆gt;

Answer 1

你可以循环它，因为外部在技术上是一个数组，并使用$first为你想要只抓取第一个图像的例子。您也可以使用$index，但通过检查$index。

的函数运行它

在此处http://jsfiddle.net/HB7LU/15324/

我只是按照这样重复循环两次

<div  ng-repeat="prod in product">
    <div  ng-repeat="image in prod.Prodimage">
        <div ng-show="$first">
            {{image}}
        </div>
    </div>
</div>

然后在内部重复内部放置一个div，只显示它是否是第一个项目。您可以再次将该逻辑更改为按索引显示，或者根据需要显示。因此，如果你知道索引，你可以改变相同的逻辑 -

请参阅小提琴 - http://jsfiddle.net/HB7LU/15332/

<div ng-show="checkIndex($index)"> << or whatever index you want
     {{image}}
</div>

并在控制器中

 $scope.checkIndex = function(item){
    if(item === 0){
         return true;
    }else{
        return false;
    }
}

您只需传递重复中当前项目的索引并进行检查。我建议在Prodimage[0]逻辑上使用这个逻辑，这样你就不会将它硬编码到html中，所以如果你必须改变所需的索引，你可以在控制器中更改它，而不是模板。 checkIndex是一个快速示例，您可以将其更改为执行任何操作。

Answer 2

是的，这是错误的，请注意您将产品对象设为数组，所以如果您想要第一个对象，则应该执行此操作

<div  ng-repeat="image in product[0].Prodimage">
        {{image[0]}}
</div>

或者如果您想迭代所有产品，则需要进行嵌套的ng-repeat

<div  ng-repeat="p in product">
        <div  ng-repeat="image in p.Prodimage">
        {{image[0]}}
        </div>
</div>

Answer 3

$scope.product[n].Prodimage是一个数组。因此，您需要先遍历product数组，然后遍历每个产品的Prodimage数组：

<div ng-repeat="prod in product">
    <div ng-repeat="image in prod.Prodimage">
        {{ image }}
    </div>
</div>

当然，您也可以使用以下内容访问第n张图片：

<div ng-repeat="prod in product">
    {{ prod.Prodimage[0] }}
</div>

Answer 4

你能把你的json改成

吗？

"Prodimage":[ 
  { "loc": "./images/zoom/zoom1hi.jpg"}, 
  { "loc": "./images/zoom/zoom2hi.jpg"},
  { "loc": "./images/zoom/zoom3hi.jpg"}],

然后你的循环应该工作

<div  ng-repeat="image in product.Prodimage">
      {{image.loc}}
</div>

在角度JS中访问JSON的某些元素

4 个答案: