Select2 Par défaut sélectionné parmi optgroup

Question

Besoin d'aide ici. J'ai hérité de ce code et je ne suis pas à 100% sur ce qui doit être fait ici, mais je dois définir l'élément sélectionné par défaut pour être le premier groupe/première option au lieu du data-placeholder. J'ai essayé d'utiliser ng-init mais je n'ai pas réussi à le faire fonctionner. Comment puis-je y parvenir avec le code ci-dessous?

<div ng-repeat='searchField in searchFields.device'> 
    <select data-placeholder='Search Field' ng-model='searchField[0]' ui-select2> 
     <option value=''></option> 
     <optgroup label='FooGroup1'> 
      <option value='foo_option1'>foo_option1</option> 
     </optgroup> 
     <optgroup label='FooGroup2'> 
      <option value='foo_option1'>foo_option1</option> 
      <option value='foo_option1'>foo_option1</option> 
     </optgroup> 
    </select> 
.... 

ACTUAL HAML

%div(ng-repeat="searchField in searchFields.message") 
    %select(ng-model="searchField[0]" ui-select2 data-placeholder="Search Field" ng-init="searchField[0] = ") 
    %option(value="") 
    - devices_optgroup.each do |group, attrs| 
     %optgroup{label: group} 
     - attrs.each do |attr, label| 
      %option(value="#{attr}")= label 

Answer 1

L'élément <option> permet pour un attribut selected facultatif. De MDN:

sélectionné Si présent, cet attribut booléen indique que est initialement sélectionné l'option. Si l'élément est le descendant d'un élément dont l'attribut multiple n'est pas défini, seul un seul de cet élément peut avoir l'attribut sélectionné.

Donc, si vous voulez sélectionner le premier élément de la première <optgroup> que vous pouvez faire quelque chose comme ceci:

<select data-placeholder='Search Field' ng-model='searchField[0]' ui-select2> 
    <option value=''></option> 
    <optgroup label='FooGroup1'> 
     <option value='foo_option1' selected>foo_option1</option> 
    </optgroup> 
    <optgroup label='FooGroup2'> 
     <option value='foo_option1'>foo_option1</option> 
     <option value='foo_option1'>foo_option1</option> 
    </optgroup> 
</select>