CODEWITHSUNDEEP
angularjsoptgroup
Mar
Mar

Reputation: 1606

working with optgroup to show select options conditionally?

I am trying to show a select option box according to previous selected option box value. For that I use 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>

The problem here is that third option box is not opening correctly!

What I see that If I set less options to optgroup B then third optgroup opens correctly..

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

That bug happens on chorme but ff and on ie10 doesn't work at all..

Any tips?

Thank you in advance!

Upvotes: 0

Views: 1481

Answers (2)

James Waddington
James Waddington

Reputation: 2905

I think you should use multiple selects instead of optgroup - as optgroup is supposed to subdivide the options in a single select, not present multiple select boxes.

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

Here's a revised plunk where the optgroups are converted to selects, and the subsequent selectors show/hide accordingly:

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

Upvotes: 1

Karthik
Karthik

Reputation: 1377

The right approach to switch the options would be move the options into an array variable in the controller and filter it when and where needed.

If that doesn't work for you and want go with this implementation you will have to use ng-if instead of 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>

What happens here is that all three option groups are rendered in the DOM which is syntactically wrong, which makes the browser picks up the third one by default. ng-if instead wont render the DOM unless the condition is satisfied.

Upvotes: 0

Related Questions