Question

我是AngulerJS的一名非常基础的初学者。

我想要做的是，当用户点击某个产品时，该产品的类型会出现，然后他们会选择一种类型，然后会出现该类型的颜色。我尝试使用相同的系统来显示类型，但我的颜色不确定。

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

的script.js

$scope.prod = {"name":"Pens"};
$scope.typ = {"id":1};
$scope.$watch('prod.name',function(){
    $http.get("products/"+$scope.prod.name+".json").success(function(data){
    $scope.type = data;
    });
    $scope.$watch('typ.id',function(type){
    $scope.shoColor = type[$scope.typ.id].colors;
}); 
})

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号，把它放到这样的东西：types [0] .colors，其中0是插入的id号。无论我把手表功能放在哪里或者我的名字，它都是＆＃34; 0＆＃34;未定义或＆＃34;颜色＆＃34;未定义。

这次我做错了什么？

Answer 1

更改此

$scope.shoColor = type[$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;

Answer 2

以下是我认为你想要实现的working fiddle。

注意： - 我已经对$scope.type data进行了硬编码，以使其能够在jsfiddle上运行。

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

希望它有所帮助，

d

$ watch函数给出undefined - AngularJS

2 个答案: