How to hide option value using ng-if condition in Angular JS

Question

I have an Input form. The two input fields that I want to compare and display values if condition true. input fields are :-

<td class="td_label"><label>Client Age :</label></td>
<td class="td_input"><input type="text" required="required" class="age" ng-model="age" name="age" maxlength="2">                          
</td>
<td class="td_label"><label>Test Age :</label></td>
<td class="td_input"><input type="number" required="required" class="libr" ng-model="libr" name="libr"  min="50" max="100">                       
</td>

<td class="td_label"><label>Rider Cost :</label></td>
<td class="td_select"><select ng-model="rider" name="rider" required>
    <option value="">Please Select</option>
    <option value="0.0001">Option 1 - 3% No Rider</option>
    <option  value=".75">Option 2 - IAV 5.5% Rider .75%</option>
    <option value=".9">Option 3 - IAV 6.0% Rider .90%</option>
    <option value=".85">Option 4 - IAV 5.5% Rider .85%</option>
    <option value="1.0">Option 5 - IAV 6.0% Rider 1.0%</option>
</select></td>

Now, I want my 3rd option from select option will not applicable if difference test age - age is more than 10 . what can i do ?

You can use ngOptions to bind the values to select input. Depending on the value of age - on change you could write the logic to either include or exclude an option. — ChandrasekarG
– ChandrasekarG, Commented Aug 19, 2016 at 10:23
@ChandrasekarG I agree with you. You might want to manage options controller side rather then applying login in view. — Hardik Vaghani
– Hardik Vaghani, Commented Aug 19, 2016 at 10:25

dfsq · Accepted Answer · 2016-08-19 10:25:07Z

3

You can simply use ngHide in this case:

<option value=".9" ng-hide="libr && age && (libr - age > 10)">Option 3 - IAV 6.0% Rider .90%</option>

answered Aug 19, 2016 at 10:25

dfsq

193k26 gold badges244 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Devidas Kadam · Accepted Answer · 2016-08-19 10:28:48Z

0

try this

 <option ng-disabled="age >= 10" value=".9">Option 3 - IAV 6.0% Rider .90%</option>

here is the working fiddle

answered Aug 19, 2016 at 10:28

Devidas Kadam

9549 silver badges19 bronze badges

1 Comment

Devidas Kadam Over a year ago

not noticed your condition, but you can use ng-disabled with appropriate condition.

Ruhul Amin · Accepted Answer · 2016-08-19 10:32:16Z

0

Just use ng-hide="age - libr > 10" to the DOM you want to hide.

answered Aug 19, 2016 at 10:32

Ruhul Amin

1,78515 silver badges20 bronze badges

Collectives™ on Stack Overflow

How to hide option value using ng-if condition in Angular JS

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related