Sumama Waheed Sumama Waheed - 2 years ago 65
HTML Question

Angular select tag easiest way to display different text in options than what's bound to ng-model

I have a select like this:

<label class="item item-input item-select">
<span class = "input-label"> Security: </span>
<select name="scopeEnumId" ng-model="task.scopeEnumId">
<option>Very Restricted</option>
<option>Staff-Only Access</option>

Now this makes the task object to look something like this when chosen:

scopeEnumId:'Very Restricted'

Can I have it that the user sees: General , Very Restricted, Staff-Only Access
but the object looks like this:




Something like

<option>enum_restricted as Very Restricted</option>

I know I can do it in javascript but I want to know if there is something built in Angular. I didn't find anything, but that doesn't mean anything :)


Answer Source

You can use the 'value' attribute on your option tags to set the desired value of scopeEnumId.


<option value="veryRestricted">Very Restricted  </option>

would map to:

{scopeEnumId : 'veryRestricted'}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download