работает с optgroup, чтобы отображать варианты выбора условно?

Question

Я пытаюсь показать окно выбора в соответствии с предыдущим выбранным значением поля опции. Для этого используем I нг-шоу:

<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 В то третий OPTGROUP правильно открывается ..

Live: http://plnkr.co/edit/Q4j2hdCfiCZI1TbuwZ8v?p=preview

Это ошибка происходит на Chorme, но далее и 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 - если вместо этого не будет отображаться DOM, если условие не будет выполнено.

Answer 2

Я думаю, вы должны использовать несколько выборок вместо optgroup - поскольку optgroup предполагается разделить параметры в одном select, а не на нескольких блоках выбора.

<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