Javascript $watch函数提供未定义的-AngularJS

我是AngulerJS的基础初学者

我想做的是，当用户点击一个产品时，会出现该产品的类型，然后他们选择一个类型，并显示该类型的颜色。我尝试过使用相同的系统来显示类型，但是我的颜色一直没有定义

<section class="colorDisplay">
  <div class="mcolor" ng-repeat="color in shoColor">
  <img ng-src="{{color.image}}"/></div>
</section>

JSON文件

{
"types":[
    {
        "name":"laser",
        "id":0,
        "image":"d-u-b/pens/laser.png",
        "colors":[
            {
                "color":"Black and Silver",
                "image":"colors/blacksilver.png",
                "prodimage":"d-u-b/pens/laser/blacksilver.png"
            },
            {
                "color":"Red",
                "image":"colors/red.png",
                "prodimage":"d-u-b/pens/laser/red.png"
            }
        ]
    },
    {
        "name":"plain",
        "id":1,
        "image":"d-u-b/pens/plain.png",
        "colors":[
            {
                "color":"Yellow",
                "image":"colors/yellow.png",
                "prodimage":"d-u-b/pens/plain/yellow.png"
            },
            {
                "color":"Blue",
                "image":"colors/blue.png",
                "prodimage":"d-u-b/pens/plain/yellow.png"
            },
            {
                "color":"Cyan",
                "image":"colors/cyan.png",
                "prodimage":"d-u-b/pens/plain/cyan.png"
            },
            {
                "color":"Silver",
                "image":"colors/silver.png",
                "prodimage":"d-u-b/pens/plain/silver.png"
            }
        ]
    }
]
}

我试图调用特定类型的id号colors，将其转换为如下内容：types[0].colors，其中0是插入的id号。 不管我把watch函数放在哪里，或者我给它起了什么名字，要么“0”是未定义的，要么“颜色”是未定义的

<section class="colorDisplay">
  <div class="mcolor" ng-repeat="color in shoColor">
  <img ng-src="{{color.image}}"/></div>
</section>

这次我做错了什么？

改变这个

$scope.shoColor = type[$scope.typ.id].colors;

到

及

到

以下是我认为你正在努力实现的目标的一个例子

注意：-我已经硬编码了

$scope.type数据

，以便它在JSFIDLE上工作

我使用了嵌套的ng重复，因为它遵循与json响应相同的代码结构

希望有帮助

---

D

它仍然给我“无法读取未定义的属性“0”，并且每当我单击其他类型时，它都会给我“无法读取未定义的属性“颜色”，这是一个与此案例相关的问题，但它仍然给我“无法读取未定义的属性“0”当我单击一个产品时，它现在不会显示产品类型。然后用http更改省略第二位，我想这是因为我没有深入到json文件中，它无法获取颜色。我看了你的档案，注意到了。更改：

$scope.shoColor=$scope.type[$scope.typ.id].colors到
$scope.shoColor=$scope.type.types[$scope.typ.id].colors它仍然给我“类型未定义”，但它仍然有效。
$scope.shoColor = $scope.type[type].colors;

$http.get("products/"+$scope.prod.name+".json").success(function(data){
$scope.type = data;

$http.get("products/"+$scope.prod.name+".json").success(function(response){
$scope.type = response.data;