Неисправность Выберите опцию выпадающих при использовании ngRepeat (или ngOptions), ngModel, ngChange и ngSelected в целом

У меня есть умная таблица со столбцом, содержащим параметры выбора (раскрывающийся список), основанные на одном объекте, и выбранная опция основана на другом объекте JSON.

Поэтому я использую ng-repeat, чтобы повторить все значения параметров, и ng-selected с другим объектом, который будет отмечать выбранные значения всех раскрывающихся списков в этом столбце.

Каждая строка обрабатывается из другого ng-repeat в теге таблицы tr.

Я также хотел, чтобы ng-change запускал вызов функции при изменении ее значения. Я сталкиваюсь с проблемами в достижении этого.

Вот плункер без использования умного стола (и любой другой сложной структуры)

PLUNKER

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

0 ответов

Другие вопросы по тегам