使用 optgroup 有条件地显示选择选项？答案

【问题标题】：working with optgroup to show select options conditionally?使用 optgroup 有条件地显示选择选项？
【发布时间】：2015-01-15 02:01:07
【问题描述】：

我正在尝试根据之前选择的选项框值显示一个选择选项框。为此，我使用 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 上根本不起作用..

有什么建议吗？

提前谢谢你！

【问题讨论】：

标签： angularjs optgroup

【解决方案1】：

我认为您应该使用多个选择而不是 optgroup - 因为 optgroup 应该在单个选择中细分选项，而不是呈现多个选择框。

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

这是一个修改后的 plunk，其中 optgroup 被转换为选择，随后的选择器相应地显示/隐藏：

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

【讨论】：

【解决方案2】：

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

如果这对您不起作用并且想要使用此实现，您将不得不使用 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。

【讨论】：