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

Posted 2023-02-22

【中文标题】根据正确选择的单选按钮显示下拉菜单

【英文标题】：Show a dropdown based on proper selected radio button

【发布时间】：2014-10-04 14:46:47

【问题描述】：

问题：

如何显示所有单选按钮，但只显示一个下拉菜单。这个显示的下拉列表是反映当前选择的 radiobtn 的下拉列表吗？

Live Code

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"
      
    
  
;

);

【问题讨论】：

你绑定的是 JSON 格式吗？

【参考方案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>