‹выбрать› с помощью 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 с примером ошибки

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


angularjs angularjs-ng-repeat angularjs-select
person scmbg    schedule 06.12.2016    source источник
comment
Можете ли вы включить данные для переменной skus, которую вы повторяете?   -  person RickCoxDev    schedule 06.12.2016
comment
[{Ключ: 1, Значение: 001}, {Ключ: 2, Значение: 002}]   -  person scmbg    schedule 06.12.2016
comment
Объект y инициализирован? Вы можете создать plnkr   -  person bhantol    schedule 06.12.2016
comment
Проверьте, работает ли использование целочисленного значения вместо объекта. я уже сталкивался с похожей проблемой   -  person rogeriolino    schedule 06.12.2016
comment
@bhantol y инициализирован — это элемент верхнего ng-repeater для таблицы   -  person scmbg    schedule 06.12.2016
comment
@rogeriolino Мне нужно использовать объект с комбинацией целого числа и строки, потому что значение может быть отличным от целого числа в виде строки   -  person scmbg    schedule 06.12.2016
comment
Небольшой plnkr даст вам быстрый ответ. Я предлагаю вам создать его.   -  person bhantol    schedule 06.12.2016
comment
@scumbag прав, но это просто предложение для тестов. если с целым числом будет работать.   -  person rogeriolino    schedule 06.12.2016
comment
@bhantol вот plnkr: plnkr.co/edit/g8hRHzt1k54ingQdMHHY?p=preview   -  person scmbg    schedule 06.12.2016
comment
Вам нужно изменить value на что-то, что будет оцениваться позже. ng-attr подойдет.   -  person bhantol    schedule 07.12.2016

Ответы (2)


arrow_upward
1
arrow_downward

Используйте 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 не синхронизированы, как можно подумать. Это объясняет, почему был выбран только последний.

В то время как согласно официальной документации - выбор между ng-options и ng-repeat можно использовать ng-repeat для ng-опций, но в случаях, когда вы имеете дело с объектами вместо идентификаторов, вы можете использовать синтаксис select as. Также есть другие причины производительности, по которым вы можете захотеть это сделать.

person bhantol    schedule 06.12.2016
comment
Это решение отлично работает, я выбираю его в качестве ответа, потому что вдобавок объясняю, что произошло. - person scmbg; 07.12.2016

arrow_upward
2
arrow_downward

попробуйте использовать ngOptions внутри элемента select вместо директивы 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

person Andriy    schedule 06.12.2016