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">
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.
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.
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 .
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.
You were close you will want to use == here like this:
<input ng-show="myDropDown=='two'" type="text">
See this fiddle for an example.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With