Javascript ng单击图像以选中radiobox 问题

单击图像或复选框时，如何使相应的下拉列表可见。 最后，无线电信箱将被隐藏起来

目前，单选按钮确实被选中，但它确实使选项正确显示？我认为这是一个范围问题

我有一系列颜色和尺寸：

app.controller('Ctrl', function ($scope, $filter, $http) {
 $scope.productData = {
  "colors_and_sizes": {
    "data": {
      "Black": {
        "swatch_image": 'http://lorempixel.com/50/50',
        "sizes": "X Small, Small, Medium, Large, Xlarge, XX Large"
      },
      "Blue": {
        "swatch_image": 'http://lorempixel.com/50/50',
        "sizes": "X Small, Small, Medium, Large, Xlarge, XX Large"
      }
    }
  }
};

});

这是我的表格

<form ng-app="app" ng-controller="Ctrl">
    <div class="color-pick" ng-repeat="(key, val) in productData.colors_and_sizes.data">
        <input type="radio" ng-checked="selected" name="colors" ng-model="$parent.myColor" ng-value="key" />
        <img ng-click="selected = true" ng-src="{{val.swatch_image}}" alt="">{{key}} 
        <div class="size-pick" ng-show="$parent.myColor==key">
            <select ng-model="$parent.mySize" ng-options="size for size in val.sizes.split(',')"></select>
        </div>
    </div>
    myColor: {{myColor}}<br/>
    mySize: {{mySize}}
</form>

{{key}}
myColor:{{myColor}}

mySize:{{mySize}}

当前，为了保存单选按钮的值，您定义了

$parent.myColor

。因此，如果您希望能够基于所选图像显示下拉列表，您可以使用img标记上的

ng click

，就像您已经做的那样，并为其指定新值

<form ng-app="app" ng-controller="Ctrl">
    <div class="color-pick" ng-repeat="(key, val) in productData.colors_and_sizes.data">
        <input type="radio" name="colors" ng-model="$parent.myColor" ng-value="key" />
        <img ng-click="$parent.myColor = key" ng-src="{{val.swatch_image}}" alt="">{{key}} 
        <div class="size-pick" ng-show="$parent.myColor==key">
            <select ng-model="$parent.mySize" ng-options="size for size in val.sizes.split(',')"></select>
        </div>
    </div>
    myColor: {{myColor}}<br/>
    mySize: {{mySize}}
</form>

{{key}}
myColor:{{myColor}}

mySize:{{mySize}}

---

.

您的意思是单选按钮确实被选中，但不能正确显示选项。您希望它们看起来如何？