ng-repeat over ng-options共享相同的ng-model

Question

我知道这很奇怪。如果不可能，我会转换API数据。

但是，我需要多个下拉菜单来共享相同的ng模型。

的问题：

1. 为什么ng-model在具有相同的var名称时是唯一的？

2. 如何让每个下拉列表共享一个ng-model="selectedSize"

   <div ng-repeat="(key, val) in listing.colors_and_sizes.data" >
   <p>{{selectedSize}}</p>
    <input
       ng-checked="selected"
       type="radio"
       name="colors"
       ng-model="selected.pdw.color"
       ng-value="key"/>
   
   <select ng-model="selectedSize"
           ng-options="choice as choice for (idx, choice) in val.sizes.split(',')"
           ng-change="selected.product.set.size(key,val, selectedSize);">
           <option value="">Please select a size</option>
   </select>
   
   </div>
   

Answer 1

ng-repeat创建子范围，因此selectedSize是该子范围的属性，因此每个范围都有自己的选择。 Read this answer related to child scope inheritance and how it applies to various directives。如果要共享相同的ng-model，只需在控制器上定义范围属性即可。 例如： -

 $scope.size = {};

并将您的ng-model设置为ng-model="size.selectedSize"：

<select ng-model="size.selectedSize"
        ng-options="choice as choice for (idx, choice) in val.sizes.split(',')"
        ng-change="selected.product.set.size(key,val, size.selectedSize);">
        <option value="">Please select a size</option>
</select>

你也不需要传递size.selected它也可以在你的控制器中使用，但是传递它没有任何伤害。