angularjs - show / hide input field conditionally

Question

Im making an angular js app for logging workouts.

When I hit the log workout button, a modal will pop up with input fields to log the workout.

What I would like to do is have a dropdown with designated workout types, and have the input fields below change depending on what type of workout I select.

For example:

If I choose "run" from the drop down, i would like these fields to appear: start time: end time: milage:

But if I were to select "weight", I would like these fields to appear instead: weight: number of sets: set 1: set 2:

You get the idea. How could I do this conditional hide / show input fields based on what workout I choose? Any good resources out there that explains this?

I would love to see what you've tried. Please post your code or provide us a link to fiddle, plnkr, etc? — Kilmazing
– Kilmazing, Commented Oct 7, 2015 at 19:50

Anurag Verma · Accepted Answer · 2015-10-07 20:00:37Z

1

You will be needing ng-show ng-hide for this purpose.

<input ng-show="myDropDown=='two'" type="text">

Here is an example fiddle for your reference http://jsfiddle.net/EZbfM/

answered Oct 7, 2015 at 20:00

Anurag Verma

4952 silver badges12 bronze badges

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

Comments

Mike Feltman · Accepted Answer · 2015-10-07 19:46:49Z

0

Basically you want to look into ng-show and ng-hide. After you select your workout type you'll want an ng-show expression on all of the relevant controls that evaluates to true when the selected workout type makes the control applicable.

https://docs.angularjs.org/api/ng/directive/ngShow

answered Oct 7, 2015 at 19:46

Mike Feltman

5,1721 gold badge19 silver badges39 bronze badges

Collectives™ on Stack Overflow

angularjs - show / hide input field conditionally

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related