CODEWITHSUNDEEP
javascriptjqueryangularjsinput
Bcavanaugh934
Bcavanaugh934

Reputation: 79

angularjs - show / hide input field conditionally

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?

Upvotes: 0

Views: 5152

Answers (2)

Anurag Verma
Anurag Verma

Reputation: 495

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/

Upvotes: 1

Mike Feltman
Mike Feltman

Reputation: 5176

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

Upvotes: 0

Related Questions