Отображение выбранной опции в раскрывающемся списке с opt-группой при загрузке страницы AngularJS не работает - PullRequest
Новая
       28

Отображение выбранной опции в раскрывающемся списке с opt-группой при загрузке страницы AngularJS не работает

0 голосов
/ 13 ноября 2018

Когда я пытаюсь показать выбранное по умолчанию значение, оно не отображается, т.е. опция не выбирается в раскрывающемся списке. Значение по умолчанию исходит из базы данных, и я устанавливаю это значение в переменной модели pageData.fields[content.id].key
Ниже приведен пример JSON, который я использую для заполнения раскрывающегося списка: 

$scope.dropdownFields = [{
    groupName: 'PAGE',
    isOptDisabled: false,
    items: [{
        name: 'PageName1',
        type: 'page'
      },
      {
        name: 'PageName2',
        type: 'page'
      },
      {
        name: 'PageName3',
        type: 'page'
      },
      {
        name: 'PageName4',
        type: 'page'
      }
    ]
  },
  {
    groupName: 'COLOR',
    isOptDisabled: false,
    items: [{
        name: 'COLOR1',
        type: 'component'
      },
      {
        name: 'COLOR2',
        type: 'component'
      },
      {
        name: 'COLOR3',
        type: 'component'
      }
    ]
  },
  {
    groupName: 'OTHERS',
    items: [{
        name: 'Bold',
        type: 'others',
        isOptDisabled: false,
        itemList: [{
            name: 'Yes',
            value: true
          },
          {
            name: 'No',
            value: false
          }
        ]
      },
      {
        name: 'Italic',
        type: 'others',
        isOptDisabled: false,
        itemList: [{
            name: 'Yes',
            value: true
          },
          {
            name: 'No',
            value: false
          }
        ]
      }
    ]
  }
];
<select id="{{content.id}}_filter" ng-model="pageData.fields[content.id].key" class="form-control" ng-change="onChangeFilter(pageData.fields[content.id].key, content.id)">
  <option value="">[Select an option]</option>
  <optgroup ng-repeat="header in dropdownFields" label="{{ header.groupName }}">
    <option ng-repeat="item in header.items" value="{{ item.name }}" ng-disabled="isDisabled(header.groupName, item.name)">{{ item.name}}
    </option>
  </optgroup>
</select>

Есть ли способ сделать это, так как я много исследовал это, но решения были с ng-options, и я не могу использовать ng-options для создания раскрывающегося списка из-за функциональности инвалидности. Я использую версию AngularJS 1.2
. Любое предложение в этом направлении будет оценено. Спасибо.

РЕДАКТИРОВАТЬ: Код успешно заполняет раскрывающийся список, и я также могу получить значение выбранной опции. Но я не могу установить опцию по умолчанию в раскрывающемся списке. Например, PageName3 уже выбран в раскрывающемся списке.

EDIT2: Пока что я могу показывать значение по умолчанию, выбранное в этом поле со списком при нажатии кнопки (вот plnk ), но я не могу установить это значение при перенаправлении с другой страницы на эту страницу.
Таким образом, на этой странице (скажем, PAGE1) я заполняю эти значения множеством таких выпадающих списков и текстовых полей для значений, затем я передаю эти значения на следующую страницу (скажем, PAGE2); на странице 2 у меня есть кнопка возврата при нажатии этой кнопки, я возвращаюсь к странице PAGE1 с теми же значениями, которые были переданы ранее, и я должен вернуть все эти значения обратно, как это было раньше. Вот где я застрял! Невозможно установить выбранные значения в раскрывающемся списке во время настройки текстовых полей.

1 Ответ

0 голосов
/ 13 ноября 2018

Вы можете добавить опцию по умолчанию в раскрывающийся список следующим образом: 

 <input type="checkbox" ng-model="selected"></label><br/>
       <select ng-model="item.name" ng-click="onChangeFilter(item.name)" class="form-control" >

        <optgroup ng-repeat="header in dropdownFields" label="{{ header.groupName }}">
            <option ng-selected="selected">Greetings!</option>
            <option ng-repeat="item in header.items">{{item.name}}</option>

        </optgroup>
      </select>

plunker: http://plnkr.co/edit/vszVo3BHEA3T4yxGSUkA?p=preview

...