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：

<强>选择如果存在，则此布尔属性指示最初选择该选项。如果元素是未设置其多个属性的元素的后代，则此元素中只有一个元素可能具有所选属性。

因此，如果您想选择第一个<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>

从optgroup中选择Select2 Default

1 个答案: