I have a select element with ng-options to populate options and <option value="">Select</option> as a static default option. I want to show another item in options list - Other, if selected, renders a textbox for user to enter other value. I tried adding another static option with value="-1" but it didn't work.
1 Answer
I would try following:
<div ng-init="arr = [{name:'A', val:1},{name:'B', val:2},{name:'C', val:2}]">
<select ng-model="v">
<option ng-repeat="o in arr" value="o.val">{{ o.name }}</option>
<option>Other</option>
</select>
<input type="number" ng-model="otherval" ng-show="v == 'other'"/>
</div>
or,
<div ng-init="arr = [{name:'A', val:1},{name:'B', val:2},{name:'C', val:2}]">
<select ng-model="v" ng-options="o.val as o.name for o in arr.concat([{name:'Other',val:'other'}])">
</select>
<input type="number" ng-model="otherval" ng-show="v == 'other'"/>
</div>
1 Comment
Amitava
I went ahead with adding
Other option in my options collection. Only downside is that I'll have to validate that if selected value is other then discard select model value and take the other input value
ng-optionstoo? That way, you could watch the model on the select and when it changes to "Other", you then show the textbox usingng-show?