与 optgroup 合作以有条件地显示 select 选项？

Question

我正在尝试根据之前的 selected 选项框值显示 select 选项框。为此，我使用 ng-show:

<select ng-model="formDate">
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select>
<select ng-model="whatever">
<optgroup ng-show="formDate == 'one'" label="A">
    <option value="a">a</option>
</optgroup>
<optgroup ng-show="formDate == 'two'" label="B">
    <option value="b">b</option>
     <option value="b">b</option>
      <option value="b">b</option>
       <option value="b">b</option>
        <option value="b">b</option>
         <option value="b">b</option>
          <option value="b">b</option>
            <option value="b">b</option>
     <option value="b">b</option>
      <option value="b">b</option>
       <option value="b">b</option>
        <option value="b">b</option>
         <option value="b">b</option>
          <option value="b">b</option>
</optgroup>
<optgroup ng-show="formDate == 'three'" label="C">
    <option value="c">c</option>
     <option value="c">c</option>
      <option value="c">c</option>
       <option value="c">c</option>
        <option value="c">c</option>
         <option value="c">c</option>
          <option value="c">c</option>
           <option value="c">c</option>

</optgroup>

这里的问题是第三个选项框没有正确打开！

我看到的是，如果我为 optgroup B 设置较少的选项，那么第三个 optgroup 会正确打开..

直播：http://plnkr.co/edit/Q4j2hdCfiCZI1TbuwZ8v?p=preview

该错误发生在 chorme 上，但 ff 和 ie10 根本不起作用..

有什么建议吗？

提前致谢！

Answer 1

切换选项的正确方法是将选项移动到控制器中的数组变量中，并在需要的时间和位置对其进行过滤。

如果这对您不起作用并且想要使用此实现，您将不得不使用 ng-if 而不是 ng-show。

<optgroup ng-if="formDate == 'one'" label="A">
    <option value="a">a</option>
</optgroup>
<optgroup ng-if="formDate == 'two'" label="B">
 <option value="b">b</option>
</optgroup>

这里发生的是所有三个选项组都在 DOM 中呈现，这在语法上是错误的，这使得浏览器默认选择第三个。 ng-if 不会渲染 DOM 除非满足条件。

Answer 2

我认为您应该使用多个 select 而不是 optgroup - 因为 optgroup 应该将选项细分为单个 select，而不是多个 select 框。

<select ng-show="formDate == 'one'">
        <option value="a">a</option>
</select>
<select ng-show="formDate == 'two'">
   etc..

这是一个修改后的插件，其中 optgroups 被转换为 selects，随后的 select 或 show/hide 相应地：

http://plnkr.co/edit/PypFN4ibcopi46bwUIgV?p=preview

与 optgroup 合作以有条件地显示 select 选项？

working with optgroup to show select options conditionally?

optgroup

angularjs