根据正确选择的单选按钮显示下拉菜单

Question

题：

如何显示所有单选按钮，但只有一个下拉菜单。 此显示的下拉菜单反映了当前选中的radiobtn？

现场代码

HTML：

<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="myColor" ng-value="{{key}}" />{{key}}
        <div class="size-pick">
            <select ng-model="mySize" ng-options="size for size in val.sizes.split(',')"></select>
        </div>
    </div>
</form>

JavaScript的：

var app = angular.module("app", []);

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

});

Answer 1

在包装select语句的div上使用ng-hide或show指令。 您可能遇到的问题是，每个ng-repeat迭代都会创建自己的作用域，这意味着您创建的每个ng-model都是完全独立的。

您可以在此处看到此内容： http : //jsfiddle.net/v2r9y6x2/ ，当单击每个选择单选按钮时，它会在其自身下方打印一个不同的值，在两种情况下，这都是设置的ng-Model的值：

您可以通过使用$ parent.property而不是仅使用属性名称来引用父作用域来解决此问题。 这会将值分配给父控制器范围并按预期工作。

http://jsfiddle.net/djwruftr/

<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" />{{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>