Неисправность Выберите опцию выпадающих при использовании ngRepeat (или ngOptions), ngModel, ngChange и ngSelected в целом
У меня есть умная таблица со столбцом, содержащим параметры выбора (раскрывающийся список), основанные на одном объекте, и выбранная опция основана на другом объекте JSON.
Поэтому я использую ng-repeat, чтобы повторить все значения параметров, и ng-selected с другим объектом, который будет отмечать выбранные значения всех раскрывающихся списков в этом столбце.
Каждая строка обрабатывается из другого ng-repeat в теге таблицы tr.
Я также хотел, чтобы ng-change запускал вызов функции при изменении ее значения. Я сталкиваюсь с проблемами в достижении этого.
Вот плункер без использования умного стола (и любой другой сложной структуры)
Способ 1:
<tr ng-repeat="objectOneRow in objectOne" >
<td>
<select ng-model="objectOneRow.selected" ng-change="optionChanged()">
<option ng-repeat="optionValue in objectTwo" ng-selected="optionValue==objectOneRow.selected">{{optionValue}}</option>
</select>
</td>
</tr>
Когда я использую ng-repeat в теге опции HTML, а ng-model и ng-change описаны в его теге select, пустая неопределенная опция вставляется в качестве первого значения, но ng-change срабатывает при изменении его значения.
Ng-selected не работает должным образом в вышеприведенном методе. Я сталкиваюсь с проблемой пустых опций (так как ng-модель будет неопределенной в начале манипуляции - аналогичная проблема в Stackru)
В качестве альтернативы, когда я использую ng-options, ng-change не запускается (но ng-selected работает нормально), так как есть два разных объекта, сопоставленных с ng-model и ng-options' repeat section.
Способ 2:
<tr ng-repeat="objectOneRow in objectOne" >
<td>
<select ng-model="objectOneRow.selected" ng-change="optionChanged()" ng-options="objectOneRow.selected as optionValue for optionValue in objectTwo track by optionValue">
</select>
</td>
</tr>
Пример данных JSON:
objectTwo = [10,20,30,40,50,60,70,80,90,100];
objectOne = [
{selected: 20},
{selected: 10},
{selected: 40},
{selected: 10},
{selected: 20},
{selected: 20},
{selected: 20},
{selected: 20},
{selected: 20},
{selected: 20}
];
В методе 1 ng-selected не работает из-за пустого значения параметра.
<option value="? string: ?"></option>
В методе 2 ng-change не работает, потому что ng-model и ng-options отображаются в разные объекты.
Примечание. Поскольку интеллектуальная таблица использует индекс от 0 до page_max для каждой страницы, я также не могу манипулировать выбранным значением вручную.