35

It's fairly straightforward. You can easily give show/hide functionality to pretty much any element using ng-show="myModelName". In the official documentation they achieve this using a checkbox.

Question: Can you use ng-show on a select option? I want to show/hide different elements depending on the option selected.

e.g.

<select ng-model="myDropDown">
      <option value="one">One</option>
      <option value="two">Two</option>
      <option value="three">Three</option>
</select>

<input ng-show="myDropDown='two'" type="text">
Phil3992
  • 1,059
  • 6
  • 21
  • 45
Scott Sword
  • 4,648
  • 6
  • 32
  • 37

1 Answers1

52

You were close you will want to use == here like this:

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

See this fiddle for an example.

Gloopy
  • 37,767
  • 15
  • 103
  • 71
  • 2
    Thanks, I posted this question on the official documentation as well. – Scott Sword Oct 09 '12 at 16:50
  • 1
    How would I implement this if Id want to show the text when one and two are selected, but not three ? – guiomie Jul 29 '13 at 11:58
  • 3
    You can change it to `ng-show="myDropDown=='one' || myDropDown=='two'"` or use `ng-hide="myDropDown=='three'"`. See [this fiddle](http://jsfiddle.net/EZbfM/34/) for an example. – Gloopy Jul 29 '13 at 16:10
  • How does this work if ng-model=myDropDown is populated dynamically from a database using ng-repeat and the ng-value is not the same as the field you need to key off of? – Nate Aug 08 '14 at 13:44
  • 1
    @Nate maybe [this question/answer](http://stackoverflow.com/questions/18647098/initializing-select-with-angularjs-and-ng-repeat) will help? – Gloopy Aug 11 '14 at 17:51
  • 1
    Note: we can use `ng-value` with expression expected ex: `ng-value="'one'"` or using only `value` with string expected ex: `value="one"` **conclusion: `ng-value` takes expression. `value` takes string. – Abdallah Okasha Mar 04 '18 at 11:04