<select> с помощью ngRepeat не выбирает элемент, когда выбран первый элемент
Я сталкиваюсь с проблемой при использовании ngRepeat а также ngSelected внутри <select> тег, это код:
<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
Примечание: цифры - это значения (не индекс)
Обновить
Теперь я заметил, что только когда последний элемент в настройках имеет ngSelected равно true, браузеры отображаются нормально
Это данные Skus:
[{ "Key" : 1, "Value" : "001" }, { "Key" : 2, "Value" : "002" }]
Обновление 2
plnkr с примером ошибки
2 ответа
Использование ng-attr-value="s.Key" вместо value="{{s.Key}}",
Попробуй плнкр
Обратите внимание на разницу только в значении:
<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 не синхронизированы, как можно подумать. Это объясняет, почему был выбран только последний.
Хотя в соответствии с официальной документацией - выбирая между ng-options и ng-repeat, вы можете использовать ng-repeat для ng-options, но в случаях, когда вы имеете дело с объектами вместо идентификаторов, вы можете использовать select as синтаксис. Также есть другие причины производительности, почему вы можете захотеть это сделать.
Попробуйте использовать ngOptions внутри элемента select вместо директивы ngRepeat:
<select ng-model="d.SkuId"
ng-options="s.Key as s.Value for s in skus">
</select>
plunker: http://plnkr.co/edit/TQIxqSv9ZBleLeA2h6WQ?p=preview