Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Binding ng-show to a select option in AngularJS

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"> 
like image 605
Scott Sword Avatar asked Oct 09 '12 16:10

Scott Sword


People also ask

How do I filter with Ng-options?

In AngularJS when you are using ng-options, you can filter out the options by calling a custom function you have in the controller. Let's say you have following set of employees and when you display all these employees inside HTML select using ng-options, you can see all the employees in a dropdown.

How do I set default selected value in ng-options?

In my opinion the correct way to set a default value is to simply pre-fill your ng-model property with the value selected from your ng-options , angular does the rest. Essentially when you define the $scope property your select will bind to assign it the default value from your data array.

What is Ng select in AngularJS?

AngularJS ng-selected Directive The ng-selected directive sets the selected attribute of an <option> element in a <select> list. The option will be selected if the expression inside the ng-selected attribute returns true. The ng-selected directive is necessary to be able to shift the value between true and false .

What is @select in angular?

Overview. HTML select element with AngularJS data-binding. The select directive is used together with ngModel to provide data-binding between the scope and the <select> control (including setting default values). It also handles dynamic <option> elements, which can be added using the ngRepeat or ngOptions directives.


1 Answers

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

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

See this fiddle for an example.

like image 98
Gloopy Avatar answered Oct 17 '22 08:10

Gloopy