<select> 当第一个元素 selected 时，ngRepeat 不 select 项

Question

我在 <select> 标签内使用 ngRepeat 和 ngSelected 时遇到问题，这是代码：

<select ng-model="y.SkuId" ng-change="y.Edited=true;">
    <option ng-repeat="s in skus" ng-selected="s.Key == y.SkuId" value="{{s.Key}}">{{s.Value}}
    </option>
</select>

当所选项目不是第一项时，这工作正常，但当所选项目是第一项时，输出错误，而不是 html 看起来不错

<option ng-repeat="s in skus" ng-selected="s.Key == y.SkuId" 
value="1" class="ng-binding ng-scope" selected="selected">001

注意：数字是值（不是索引）

更新

Now I noticed that only when the last one item in options has the ngSelected equals true, browsers displays fine

这是SKU数据：

[{ "Key" : 1, "Value" : "001" }, { "Key" : 2, "Value" : "002" }]

更新 2

plnkr 错误示例

http://plnkr.co/edit/g8hRHzt1k54ingQdMHHY?p=preview

Answer 1

尝试在 select 元素中使用 ngOptions 而不是 ngRepeat 指令:

<select ng-model="d.SkuId"
        ng-options="s.Key as s.Value for s in skus">
</select>

笨蛋：http://plnkr.co/edit/TQIxqSv9ZBleLeA2h6WQ?p=preview

Answer 2

使用 ng-attr-value="s.Key" 而不是 value="{{s.Key}}"。

尝试plnkr

注意区别只是值：

<select ng-model="k.Key" >
  <option ng-repeat="s in skus" ng-selected="s.Key === k.Key" 
     ng-attr-value="s.Key">{{s.Value}}</option>
</select>

使用 {{}} 的表达式计算时间和 ng-repeat 编译时间并不像人们想象的那样同步。这就解释了为什么只选择了最后一个。

虽然根据 official documentation - choosing between ng-options and ng-repeat 您可以将 ng-repeat 用于 ng-options，但在处理对象而不是 ID 的情况下，您可能喜欢使用 select as 语法。还有其他性能原因可能会导致您这样做。

<select> 当第一个元素 selected 时，ngRepeat 不 select 项

<select> with ngRepeat dont select item when first element selected

angularjs

angularjs-ng-repeat

angularjs-select