Question

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

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

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

这里是修改后的插件，其中optgroups被转换为选择，随后的选择器相应地显示/隐藏：

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

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

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

2 个答案: