Select2 从 optgroup 中选择的默认值

Question

在这里需要一些帮助。我继承了这段代码，我不是 100% 知道这里需要做什么，但我需要将默认选定项目设置为第一个组/第一个选项，而不是 data-placeholder。 我尝试使用ng-init，但我无法让它工作。 如何使用以下代码实现这一点？

<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>
....

实际 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

<option> 元素允许使用可选的selected 属性。来自MDN：

已选择 如果存在，此布尔属性表示该选项最初被选中。如果该元素是未设置 multiple 属性的元素的后代，则该元素可能只有一个具有 selected 属性。

所以如果你想选择第一个 <optgroup> 的第一个元素，你可以这样做：

<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>